Ändern Sie das blaue Leuchten des Bootstrap-Eingabefokus

Weiß jemand, wie man Bootstraps ändert input:focus? Das blaue Leuchten, das angezeigt wird, wenn Sie auf ein inputFeld klicken ?

Am Ende habe ich den folgenden CSS-Eintrag in bootstrap.css geändert

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(126, 239, 104, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

Mit dem .form-controlSelektor können Sie alle Eingänge abgleichen. Zum Beispiel, um zu Rot zu wechseln:

.form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

Fügen Sie es in Ihre benutzerdefinierte CSS-Datei ein und laden Sie es nach bootstrap.css. Es gilt für alle Eingaben einschließlich Textbereich, Auswahl usw.

Wenn Sie Bootstrap 3.x verwenden, können Sie jetzt die Farbe mit der neuen @input-border-focusVariablen ändern .

Weitere Informationen und Warnungen finden Sie im Commit .

In _variables.scss Update@input-border-focus .

Um die Größe / andere Teile dieses Glühens zu ändern, ändern Sie die mixins / _forms.scss

@mixin form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  &:focus {
    border-color: $color;
    outline: 0;
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px $color-rgba);
  }
}

Sie können die .form-control:focus Farbe ändern, ohne den Bootstrap-Stil folgendermaßen zu ändern:

Schnelle Lösung

.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    } 

Vollständige Erklärung

1. Suchen Sie die von Ihnen verwendete bootstrapCDN-Version. Zum Beispiel ist für mich momentan 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
2. Suchen Sie nach der Klasse, die Sie ändern möchten. ZB .form-control:focuskopieren Sie die Parameter, die Sie ändern möchten, in Ihr CSS. In diesem Fall ist border-colorund box-shadow.
3. Wählen Sie eine Farbe für die border-color. In diesem Fall nehme ich das gleiche Grün, das der Bootstrap für seine .btn-successKlasse verwendet, indem ich auf der in Schritt 1 erwähnten Seite bootstrap.css nach dieser bestimmten Klasse suche.
4. Konvertieren Sie die ausgewählte Farbe in RGB und fügen Sie diese dem box-shadowParameter hinzu, ohne den vierten RGBA-Parameter (0,25) zu ändern, den Bootstrap für Transparenz hat.

Für die Beta-Version von Bootstrap v4.0.0 müssen Sie einem Stylesheet, das Bootstrap überschreibt, Folgendes hinzufügen (entweder nach CDN / lokalem Link zur Beta-Version von Bootstrap v4.0.0 hinzufügen oder !importantzu den Stylings hinzufügen :

.form-control:focus {
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}

Ersetzen Sie die Rahmenfarbe und die RGBA auf dem Kastenschatten durch den gewünschten Farbstil *.

Wenn Sie in Bootstrap 4 SASS selbst kompilieren, können Sie die folgenden Variablen ändern, um das Styling des Fokusschattens zu steuern:

$input-btn-focus-width:       .2rem !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

Hinweis: ab Bootstrap 4.1, die $input-btn-focus-colorund $input-btn-focus-box-shadowsind Variablen nur für Eingabeelemente verwendet, aber nicht für Tasten. Der Fokusschatten für Schaltflächen ist fest codiert box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);, sodass Sie die Schattenbreite nur über die $input-btn-focus-widthVariable steuern können.

Hier sind die Änderungen, wenn Chrome die standardmäßige "gelbe" Gliederung der Plattform anzeigen soll.

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-    input:focus {
    border-color: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 5px;
}

Fügen Sie Folgendes zu Ihrem CSS hinzu, um das blaue Leuchten zu deaktivieren (Sie können den Code jedoch ändern, um Farbe, Größe usw. zu ändern):

.search-form input[type="search"] {  
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 0px;
} 

Hier ist eine Bildschirmaufnahme, die den Effekt zeigt: vorher und nachher:

Ich landete in diesem Thread und suchte nach einer Möglichkeit, das Leuchten vollständig zu deaktivieren. Viele Antworten waren für meinen Zweck zu kompliziert. Für eine einfache Lösung benötigte ich nur eine Zeile CSS wie folgt.

input, textarea, button {outline: none; }

Fügen Sie dem Body-Tag eine ID hinzu. Zeigen Sie in Ihrem eigenen CSS (nicht in der Datei bootstrap.css) auf die neue Body-ID und legen Sie die Klasse oder das Tag fest, die bzw. das Sie überschreiben möchten, sowie die neuen Eigenschaften. Jetzt können Sie Bootstrap jederzeit aktualisieren, ohne Ihre Änderungen zu verlieren.

HTML-Datei:

  <body id="bootstrap-overrides">

CSS-Datei:

#bootstrap-overrides input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus{
  border-color: red;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

Siehe auch: Beste Möglichkeit, Bootstrap-CSS zu überschreiben

In Bootstrap 4.0.0-Beta (Stand Oktober 2017) wird das Eingabeelement nicht durch Eingabe [type = "text"] referenziert. Alle Bootstrap 4-Eigenschaften für das Eingabeelement basieren tatsächlich auf Formularen .

Es wird also die .form-control: focus- Stile verwendet. Der geeignete Code für die Hervorhebung eines Eingabeelements "im Fokus" lautet wie folgt:

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: none;
}

Ziemlich einfach zu implementieren, ändern Sie einfach die border-color - Eigenschaft.

In Bootstrap 3.3.7 können Sie den Wert @ input-border-focus im Abschnitt Formulare des Customizers ändern:

Aufbauend auf der obigen Antwort von @ wasinger musste ich in Bootstrap 4.5 nicht nur die Farbvariablen, sondern auch die box-shadowselbst überschreiben .

$input-focus-width: .2rem !default;
$input-focus-color: rgba($YOUR_COLOR, .25) !default;
$input-focus-border-color: rgba($YOUR_COLOR, .5) !default;
$input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-color !default;

Warum nicht einfach benutzen?

 input:focus{
        outline-color : #7a0ac5;
    }

Ich konnte dies mit CSS nicht lösen. Es scheint, als ob Boostrap das letzte Wort bekommt, obwohl ich nach dem Bootstrap von site.css habe. Auf jeden Fall hat das bei mir funktioniert.

$(document).ready(function () {
    var elements = document.getElementsByClassName("form-control");

    Array.from(elements).forEach(function () {
        this.addEventListener("click", cbChange, false);
    })

    });

function cbChange(event) {
    var ele = event.target;
    var obj = document.getElementById(ele.id);
    obj.style.borderColor = "lightgrey";
}

Später fand ich, dass dies in der CSS funktioniert. Offensichtlich nur mit Formularsteuerelementen

.form-control.focus, .form-control:focus {
    border-color: gainsboro;
} 

Hier sind Vorher- und Nachher-Aufnahmen vom Chrome Developer Tool. Beachten Sie den Unterschied in der Rahmenfarbe zwischen Fokus ein und Fokus aus. Nebenbei bemerkt funktioniert dies nicht für Schaltflächen. Mit Knöpfen. Mit Schaltflächen müssen Sie die Gliederungseigenschaft in keine ändern.

Für den Eingaberand vor dem Fokus. Sie können Ihre Lieblingsfarbe angeben, die Sie verwenden möchten, und andere CSS wie Polster usw.

.input {
    padding: 6px 190px 6px 15px;
    outline: #2a65ea auto 105px ;
}

Wenn wir uns auf Input konzentrieren. Sie können Ihren bevorzugten Farbumriss angeben

.input:focus{
    box-shadow: none;
    border-color: none;
    outline: lightgreen auto 5px ;
}

Wenn Sie den Schatten vollständig entfernen möchten, fügen Sie die Klasse shadow-noneIhrem Eingabeelement hinzu.