Bootstrap-Taste - entfernen Umriss auf Chrome OS X

Question

Ich suche diese zu erreichen: http://getbootstrap.com/javascript/#popovers-examples - blättern Sie zu dem „Live-Demo“ ein und drücken Sie die rote Taste popover, in Chrome auf OS X .... Es ist perfekt schöne

Jetzt gehen Sie hier (das Problem Kind): http://yoyo.io/javascript/#popovers - es umreißt blau, aaaargh.

Wenn Sie inspizieren, werden Sie eine Litanei CSS-Bemühungen von mir sehen, um dies zu entfernen! Es sieht in Safari und Firefox korrekt aus, aber in Chrome ist es kein Problem!

Jedermann - was übersehe ich ??

Vielen Dank im Voraus!

Answer 1

I .btn:focus sehen hat eine outline darauf:

.btn:focus { 
    outline: thin dotted; 
    outline: 5px auto -webkit-focus-ring-color; 
    outline-offset: -2px; 
} 

Versuchen Sie, dies zu:

.btn:focus { 
    outline: none; 
} 

Grundsätzlich suchen Sie alle Instanzen von outline auf :focus ed Elemente - das ist, was es verursacht.

Answer 2

Suchen und Ersetzen

outline: thin dotted; 
outline: 5px auto -webkit-focus-ring-color; 

ersetzen zu

outline: 0; 

Answer 3

Für alle Googler wie ich, wo ..

.btn:focus { 
    outline: none; 
} 

noch nicht in Google Chrome nicht funktioniert, die folgende sollte jedes Knopfglühen vollständig entfernen.

.btn:focus,.btn:active:focus,.btn.active:focus, 
.btn.focus,.btn:active.focus,.btn.active.focus { 
    outline: none; 
} 

Answer 4

.btn:focus, .btn:active:focus, .btn.active:focus{ 
    outline:none; 
    box-shadow:none; 
} 

Dies sollte

Answer 5

Schattenumriß und Box entfernen Sie diesen Tag in Ihre HTML setzen können.

<button class='btn btn-primary' onfocus='this.blur'> 
    Button Text 
</button> 

ich Fokus verwendet, weil Onclick noch die Glut für eine Mikrosekunde angezeigt und machte einen schrecklichen suchen Blitz in Bezug auf die es zu benutzen. Dies schien nach dem Scheitern aller CSS-Methoden loszuwerden.

Answer 6

Das CSS geht von dieser Datei "tab-focus.less" in Mixins-Ordner (es könnte schwierig sein, zu finden, weil Mixins nicht in Chrome Dev-Tools angezeigt werden). So sollten Sie diese bearbeiten:

// WebKit-style focus 

.tab-focus() { 
     // Default 
     outline: thin dotted; 
     // WebKit 
     outline: 5px auto -webkit-focus-ring-color; 
     outline-offset: -2px; 
    } 

Answer 7

Dies wird es entfernen - kurz und sauber:

.btn { 
    outline: none !important; 
} 

Answer 8

.btn.active oder .btn.focus allein kann nicht Überschreibung Bootstrap Styles.Für Standard-Theme:

.btn.active.focus, .btn.active:focus, 
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus { 
     outline: none; 
} 

Answer 9

In dem Mixins der Bootstrap Quellen Sass Dateien, entfernen Sie alle $border Referenzen (nicht in der Gliederung Variante).

@mixin button-variant($color, $background, $border){ 
$active-background: darken($background, 10%); 
//$active-border: darken($border, 12%);  
    color: $color; 
    background-color: $background; 
    //border-color: $border; 
    @include box-shadow($btn-box-shadow); 
    [...] 
} 

Oder einfach Code Sie besitzen _customButton.scss Mixin.

Answer 10

In Bootstrap 4 wird der Umriss nicht mehr verwendet, sondern der Box-Shadow. Wenn es der Fall ist, tun nur die folgenden:

.btn:focus { 
    box-shadow: none; 
}