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 Entfernen outline ist für die Zugänglichkeit schrecklich! Idealerweise ist der Fokusring nur sichtbar, wenn der Benutzer beabsichtigt, die Tastatur zu verwenden.

Verwenden Sie :focus-visible. Es wird in allen gängigen Browsern unterstützt (caniuse).

/* Entferne outline für nicht-Tastatur :focus */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Optional: :focus-visible anpassen */
:focus-visible {
  outline-color: lightgreen;
}

Answer 2

Fügen Sie dies in Ihre CSS-Datei ein.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

Answer 3

Die Lösung für Chrome und andere Browser

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

Answer 4

Für dieses Problem:

verwenden Sie dies:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* Für einige Androids */
    }

Ergebnis:

Answer 5

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
}