Twitter Bootstrap - So entfernen Sie blaue Outline von Select Option

Question

Können Sie bitte einen Blick auf this example und lassen Sie mich wissen, wie ich diese blaue Gliederung für Drop-Down-Auswahl-Taste und den Sucheingang im Dropdown-Menü loswerden kann (unten gezeigtes Bild)?

ich schon versucht:

.btn-default { 
    outline: none !important; 
    box-shadow: none !important; 
    background-color: transparent !important; 
    background-image: none !important; 
} 
input, textarea, select, a { outline: none !important; } 
input:focus, textarea:focus, select:focus{ outline: none; } 

aber sie sind nicht tut den Trick!

Answer 1

Bootstrap Formulareingabeelemente, die die outline nicht Eigentum verwenden, aber es eher box-shadow mit neu erstellen. Sie waren auf dem richtigen Weg mit dem, was Sie taten, aber der Stil, ist dies bewirkt, dass der folgende:

.form-control:focus { 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); 
} 

Sie wollen diese Stile mit Ihrem eigenen außer Kraft zu setzen, die box-shadow-none Einstellung und Anpassung der border-color zu passen Sie Ihren Standard an.

Was die Select-Box, können Sie den folgenden Stil verwenden, wie ursprünglich von @ kamlesh-Kushwaha erwähnt wurde die Bootstrap-Einstellung außer Kraft zu setzen:

.bootstrap-select .btn:focus { 
    outline: none !important; 
} 

Answer 2

Fügen Sie die css focus Regel hinzu oder ändern Sie die vorhandene.

.bootstrap-select .btn:focus{outline:none!important;} 

Ebenso können Sie hinzufügen, für select

Answer 3

Sie input[type] {}

Alle Bootstrap verwenden können Eingabetyp wie unten

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); 
    /* give your style */ 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(255, 0, 0, 0.6); 
    /* give your style */ 
    outline: 0 none; 
    /* give your style */ 
} 

select:focus { 
    outline-color: transparent; 
} 

Answer 4

Für <select> Drop-down-Änderung in Bootstrap-select.min Linie 29:

.bootstrap-select .dropdown-toggle:focus { 
    outline: thin dotted #333 !important; 
    outline: 5px auto -webkit-focus-ring-color !important; 
    outline-offset: -2px;} 

zu:

.bootstrap-select .dropdown-toggle:focus { 
    outline: none!important; 
}