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

Ich hatte das gleiche Problem mit Bootstrap. Ich habe es sowohl mit outline als auch mit box-shadow gelöst

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // oder none
}

Answer 2

Die meisten Lösungen funktionieren nicht, wenn Sie Bootstrap 4.1 und möglicherweise andere Versionen verwenden. Nach vielen Kopfschmerzen habe ich festgestellt, dass Sie die Klasse shadow-none anwenden müssen:

Bootstrap (4.1) Button ohne Schatten

Answer 3

Für alle, die Bootstrap verwenden und dieses Problem haben, verwenden sie :active:focus sowie nur :active und :focus, sodass Sie benötigen:

element:active:focus {
    outline: 0;
}

Hoffentlich hat das jemandem Zeit gespart, das herauszufinden, ich habe eine Weile meinen Kopf zerbrochen, warum so etwas Einfaches nicht funktioniert hat.

Answer 4

Das hat für mich funktioniert:

button:focus {
    box-shadow: none;
}

Answer 5

Ein weiterer Weg, das Zugänglichkeitsproblem zu lösen, das hier noch nicht erwähnt wurde, ist durch ein wenig Javascript. Credits gehen an diesen aufschlussreichen Blogbeitrag von Hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

Der Ansatz hier ist wirklich einfach aber effektiv: Eine Klasse hinzufügen, wenn Menschen anfangen, die Tab-Taste zu verwenden, um die Seite zu navigieren (und optional entfernen, wenn sie wieder zur Maus wechseln. Dann kannst du diese Klasse verwenden, um eine Fokusrandschrift entweder anzuzeigen oder nicht.

function handleFirstTab(e) {
    if (e.keyCode === 9) { // der "Ich bin ein Tastaturnutzer" Schlüssel
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);