Entfernen Sie den blauen Rahmen von der CSS-benutzerdefinierten Schaltfläche in Chrome

Question

Ich arbeite an einer Webseite und möchte benutzerdefinierte -Tags verwenden. Also habe ich mit CSS gesagt: border: none. Jetzt funktioniert es perfekt in Safari, aber in Chrome erscheint beim Klicken auf einen der Buttons ein nerviger blauer Rahmen. Ich dachte button:active { outline: none } oder button:focus { outline: none } würde funktionieren, aber keines davon tut es. Irgendwelche Ideen?

So sieht es aus, bevor darauf geklickt wird (und so soll es auch nach dem Klicken aussehen):

Und das ist der Rahmen, über den ich spreche:

Hier ist mein CSS:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

Answer 1

Das ist nicht empfohlen, da es die Barrierefreiheit Ihrer Website beeinträchtigt; für weitere Informationen, siehe diesen Beitrag.

Wenn Sie dennoch darauf bestehen, sollte dieser CSS-Code funktionieren:

button:focus {outline:0;}

Testen Sie es auf JSFiddle: http://jsfiddle.net/u4pXu/

Oder in diesem Code-Ausschnitt:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

Mit diesen Anzeigen starten 
Ändern

Answer 2

Warte! Es gibt einen Grund für diese hässliche Kontur!

Bevor Sie diese hässliche blaue Kontur entfernen, sollten Sie die Barrierefreiheit in Betracht ziehen. Standardmäßig wird diese blaue Kontur auf fokussierbare Elemente platziert. Dies dient dazu, dass Benutzer mit Zugänglichkeitsproblemen diesen Button durch Tabulatortaste ansteuern können. Einige Benutzer haben nicht die motorischen Fähigkeiten, um eine Maus zu verwenden, und müssen nur die Tastatur (oder ein anderes Eingabegerät) für die Computerinteraktion verwenden. Wenn Sie die blaue Kontur entfernen, gibt es keine visuelle Anzeige mehr, welches Element fokussiert ist. Wenn Sie die blaue Kontur entfernen möchten, sollten Sie sie durch einen anderen visuellen Hinweis ersetzen, dass der Button fokussiert ist.

Mögliche Lösung: Buttons verdunkeln, wenn fokussiert

Für die folgenden Beispiele wurde die blaue Kontur von Chrome zunächst entfernt, indem button:focus { outline:0 !important; } verwendet wurde.

Hier sind Ihre grundlegenden Bootstrap-Buttons, wie sie normal aussehen:

Hier sind die Buttons, wenn sie fokussiert sind:

Hier sind die Buttons, wenn sie gedrückt werden:

Wie Sie sehen können, sind die Buttons etwas dunkler, wenn sie fokussiert sind. Ich persönlich würde empfehlen, die fokussierten Buttons sogar noch dunkler zu machen, damit es einen sehr deutlichen Unterschied zwischen dem fokussierten Zustand und dem normalen Zustand des Buttons gibt.

Es ist nicht nur für behinderte Benutzer

Ihre Website zugänglicher zu machen wird oft übersehen, kann aber dazu beitragen, ein produktiveres Erlebnis auf Ihrer Website zu schaffen. Es gibt viele normale Benutzer, die Tastaturbefehle verwenden, um durch Websites zu navigieren, um die Hände auf der Tastatur zu behalten.

Answer 3

In meinem Fall dieses Problems musste ich box-shadow: none angeben

button:focus {
  outline:none;
  box-shadow: none;
}

Answer 4

Ich entferne einfach die Kontur von allen Tags auf der Seite, indem ich alles auswähle und outline:none auf alles anwende :)

*:focus {outline:none}

Wie bagofcole erwähnt hat, müssen Sie möglicherweise auch !important hinzufügen, damit der Style so aussieht:

*:focus {outline:none !important}

Answer 5

Vergessen Sie nicht die !important Deklaration, für ein besseres Ergebnis

button:focus {outline:0 !important;}

Ein Regel, die die !important Eigenschaft hat, wird immer angewendet, egal wo diese Regel im CSS-Dokument erscheint.