Ändern Sie den blauen Fokus des Bootstrap-Eingabefokus

Weiß jemand, wie die änderung der bootstrap-input-focus-blau glow. D. H. der Schein, der angezeigt wird, wenn Sie auf ein input-Feld ?

Kommentar zu dem Problem
Wie kann ich die Fokus-Selektor in mehreren Orten Im nicht sicher waren, sollte ich es ändern ? Kommentarautor: felix001
Scheinbar @mdo ist zu 100% gegen uns erlauben, zu spezifizieren, das Leuchten der Farbe, WENIGER variable: github.com/twitter/bootstrap/issues/2742 Kommentarautor: Ben Harold

InformationsquelleAutor der Frage felix001 | 2013-02-11

  1. 175

    Am Ende änderte ich den folgenden css-Eintrag in der bootstrap.css

    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;
}

    InformationsquelleAutor der Antwort felix001

  2. 122

    In Bootstrap 3, die Sie verwenden können .form-control Selektor mit allen Eingängen. Zum Beispiel in rot ändern:

    .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);
}

    Legen Sie Sie in Ihrer benutzerdefinierten css-Datei und laden Sie es nach dem bootstrap.css. Es gelten für alle Eingänge, einschließlich textarea, select usw...

    InformationsquelleAutor der Antwort igaster

  3. 55

    Wenn Sie Bootstrap 3.x Sie können nun die Farbe mit der neuen @input-border-focus variable.

    Sehen die commit - für weitere Informationen und Warnungen.

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

    Ändern der Größe/andere Teile dieser Schein ändern Sie die Mixins in Verbindung/_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);
  }
}

    InformationsquelleAutor der Antwort Nate Todd

  4. 10

    Hier sind die änderungen, wenn Sie wollen, Chrome zu zeigen, die Plattform-Standard "gelb" Umriss.

    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;
}

    InformationsquelleAutor der Antwort peater

  5. 5

    Landete ich auf diesen thread auf der Suche nach dem Weg zu deaktivieren, Leuchten insgesamt. Viele Antworten waren zu kompliziert für meinen Zweck. Für eine einfache Lösung, ich brauchte nur eine Zeile CSS wie folgt.

    input, textarea, button {outline: none; }

    InformationsquelleAutor der Antwort massanishi

  6. 4

    Vergeben Sie eine Id für den body-tag. In Ihrem eigenen Css (nicht die bootstrap.css), die neue body-ID und legen Sie die Klasse oder das tag, das Sie überschreiben möchten und die neuen Eigenschaften.
    Jetzt können Sie das update bootstrap jederzeit ohne verlieren Sie Ihre änderungen.

    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 Weg, um zu überschreiben, bootstrap, css

    InformationsquelleAutor der Antwort homefreelancer

  7. 3

    Eigentlich in der Bootstrap-4.0.0-Beta (Oktober 2017) den input-element nicht verwiesen wird, indem Sie input[type="text"], alle Bootstrap-4 Eigenschaften für das input-element sind eigentlich form basiert.

    So ist es mit der .form-control:focus Stile. Den entsprechenden code für die "focus" - Hervorhebung eines input-element ist die folgende:

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

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

    InformationsquelleAutor der Antwort Mindsect Team

  8. 3

    In der Bootstrap-4, wenn Sie kompilieren SASS von sich selbst, können Sie ändern Sie die folgenden Variablen zur Kontrolle für das styling des focus Schatten:

    $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: da der Bootstrap 4.1, die $input-btn-focus-color und $input-btn-focus-box-shadow Variablen werden nur verwendet für die input-Elemente, aber nicht für Tasten. Der Fokus Schatten für die Tasten ist fest als box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);, so können Sie nur die Kontrolle der Breite Schatten über das $input-btn-focus-width variable.

    InformationsquelleAutor der Antwort wasinger

  9. 2

    Für Bootstrap v4.0.0 beta-Version benötigen Sie die folgenden Hinzugefügt, um ein stylesheet, überschreibt Bootstrap (entweder add-in nach CDN/local link zu bootstrap v4.0.0 beta oder fügen Sie !important zu den stylings:

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

    Ersetzen border-color und rgba auf der box-shadow mit dem je Farbe Stil, den Sie möchten*.

    InformationsquelleAutor der Antwort Michael Roberts

  10. 0

    In der Bootstrap-3.3.7 ändern Sie können die @input-border-Fokus-Wert in der Rubrik "Formulare" der customizer:
    Ändern Sie den blauen Fokus des Bootstrap-Eingabefokus

    InformationsquelleAutor der Antwort Steve

Schreibe einen Kommentar