Ändern Sie das blaue Leuchten des Bootstrap-Eingabefokus


190

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


Da ich den Fokuswähler an mehreren Stellen sehen kann, bin ich mir nicht sicher, ob ich ihn ändern soll?
felix001

1
Anscheinend ist @mdo zu 100% dagegen, dass wir die Leuchtfarbe mit einer WENIGER Variablen angeben können: github.com/twitter/bootstrap/issues/2742
Ben Harold

Antworten:


223

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

3
Ich bin auf das Zielen gestoßeninput[type] {}
Morpheus

2
Dies ist mit Bootstrap 3.x nicht mehr erforderlich. Siehe meine Antwort für weitere Informationen.
Nate T

@ Cricket Diese Variable ist derzeit nicht im Boostrap Customizer verfügbar :(
Caumons

2
@Caumons Es ist jetzt. Ich würde empfehlen, @input-border-focusanstelle dieser Antwort zu verwenden.
Nate T

4
Sie haben vergessenselect
David Morrow

169

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.


Dies ist nicht das, was das OP wollte. Er fragte, wie man das Leuchten ändert, nicht die Grenze
Kevin Martin Jose

8
@lonesword ist richtig, tatsächlich müssen Sie sowohl die Rahmenfarbe als auch die Schattenfarbe ändern. Ich habe die Antwort aktualisiert
igaster

2
Dies ist weitaus sauberer als die Lösung von @ felix001 und funktioniert
dspacejs

58

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

4
Haben Sie ein Beispiel dafür, wie dies erreicht werden kann? Vielen Dank im Voraus
Seany84

2
Sie müssen die Less- oder Sass- Versionen der Bootstrap-Stylesheets verwenden. Legen Sie dann Ihre benutzerdefinierte Variable fest, bevor Sie die Bootstrap-Stylesheets importieren. Dadurch werden die Bootstrap-Standardeinstellungen überschrieben. Sie müssen entweder Ihre Stylesheets vorkompilieren oder so etwas wie Kettenräder verwenden .
Nate T

Sie können auch die offizielle Bootstrap-Site verwenden, um benutzerdefinierte Änderungen an den weniger Variablen vorzunehmen
red_trumpet

1
Schön, aber das gilt anscheinend nicht für Schaltflächen und andere Links, sondern nur für Eingaben und Textbereiche. Bei Schaltflächen müssen Sie beispielsweise noch überschreiben .btn:focus { outline: none; }.
Zok

Diese Antwort funktioniert für Benutzer von SASS / SCSS. @ input-order-focus ist in _variables.scss.
TyMayn

30

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

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.

1
großartig, es ist einfach und funktioniert, und ich brauche auch grüne Farbe :)
alfian5229

13

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 *.


12

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.


11

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

1
Wie kann ich die chromgelbe Kontur deaktivieren?
Roy Lee

Deaktivieren Sie NICHT alle: Fokusumrisse (wie oben vorgeschlagen). Es ist schrecklich für die Zugänglichkeit nur für Tastaturbenutzer. Sie können die Plattform-Standardeinstellungen wie oben deaktivieren und etwas hinzufügen, das angemessen zugänglich ist: outline: dotted thin black;(oder was auch immer Ihre Tests
vorschlagen

8

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: Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein


Das hat bei mir funktioniert. Aber ich musste auch Randfarbe hinzufügen, da es blau bleiben würde.
Rachel S

6

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

2
Ich würde denken, dass Sie auch brauchen könnten box-shadow: none;.
Silverliebt

2
Es hat bei mir funktioniert, aber ich musste !importantnach dem box-shadowVorschlag von @silverliebt
Jefrey Sobreira Santos

5

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


5

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.


Oder wenn Sie scss verwenden, überschreiben Sie einfach die Variable $ input-focus-border-color für Bootstrap 4.0.0-Beta
Zuhaib Ali

Ich denke, Sie müssen auch hinzufügenbox-shadow: xpx ypx #80bdff;

1

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


1

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;


0

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.

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein


0

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

0

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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.