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 dasselbe Problem, also habe ich einfachen CSS verwendet-

.custom-button {
    outline: none
}

Answer 2

Probieren Sie diesen Code für alle Elemente aus, die das Problem mit dem blauen Rand haben

*{
outline: none;
}

oder

*{
outline-style: none;
}

Answer 3

Bis alle modernen Browser beginnen, den CSS-Selektor :focus-visible zu unterstützen,
ist der einfachste und möglicherweise beste Weg, die Barrierefreiheit zu wahren, diesen schwierigen Fokus nur für Mausbenutzer zu entfernen und ihn für Tastaturbenutzer zu speichern:

1.Verwenden Sie dieses kleine Polyfill (ca. 10kb): https://github.com/WICG/focus-visible
2.Fügen Sie den folgenden Code irgendwo in Ihre CSS-Datei ein:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Die Browser-Unterstützung für den CSS4-Selektor :focus-visible ist momentan sehr schwach:
https://caniuse.com/#search=focus-visible

Answer 4

Verwenden Sie diesen untenstehenden Code für Chakra UI,

:focus {
  box-shadow: none !important;
}

*[data-focus] {
  box-shadow: none !important;
}`

Answer 5

Ok, auch wenn das Risiko besteht, dass niemand dies jemals sieht, weil es bereits so viele Antworten gibt, möchte ich als Lösungsvorschlag für JavaScript-Lösungen im Jahr 2020 noch mehr anbieten:

outline.js oder alternativ outliner.js, beide Bibliotheken lösen genau die Probleme, die wir hier alle haben: Entfernen von Umrandungen für Mäuse, aber Beibehaltung der Tastaturfunktionalität oder Zugänglichkeit.

Entscheiden Sie sich also nicht zwischen Stil oder Zugänglichkeit, wählen Sie beides!