Wie entferne ich den lästigen blauen Rand von Schaltflächen in Chrome?

Entfernen Sie den blauen Rand von benutzerdefinierten Schaltflächen in Chrome

Beim Anpassen des Erscheinungsbilds von Wenn Sie CSS-Tags verwenden, wird für ein übersichtlicheres Erscheinungsbild häufig der Standardrahmen entfernt. In Chrome kann jedoch beim Klicken ein störender blauer Rahmen um die Schaltfläche erscheinen.

Das Problem:

Die Standardbrowser-Stile überschreiben möglicherweise einige CSS-Eigenschaften, einschließlich dieser bezogen auf Fokus und aktive Zustände. In Chrome haben Schaltflächen beim Klicken einen blauen Fokusumriss, auch wenn „Rahmen: keiner“ festgelegt ist.

Lösung:

Hinweis: Fokus wird entfernt Umrisse werden nicht empfohlen, da dies die Barrierefreiheit beeinträchtigen kann.

Wenn Sie den blauen Rand dennoch ausblenden möchten, fügen Sie das folgende CSS hinzu Regel:

button:focus {
  outline: 0;
}

Diese Regel entfernt explizit die Fokuskontur und überschreibt das Standardbrowserverhalten.

Erklärung:

Der :focus-Pseudo- Die Klasse wird ausgelöst, wenn ein Element den Fokus erhält (normalerweise durch Klicken oder Tabulator). Durch Festlegen von „outline: 0;“ eliminieren Sie den blauen Rand, der mit diesem fokussierten Zustand verbunden ist.

Alternative Lösungen:

• Verwenden Sie Schaltflächen-Tags, die speziell für Barrierefreiheit entwickelt wurden. wie zum Beispiel

.

Deaktivieren Sie den Umriss aller Schaltflächen mit *{outline: 0}; (nicht empfohlen).

Verwenden Sie JavaScript, um die Fokuskontur auf bestimmten Schaltflächen zu entfernen.

Zusätzliche Überlegungen:

• Stellen Sie sicher Stellen Sie sicher, dass Ihr CSS ordnungsgemäß geladen und auf die Seite angewendet wird.
• Leeren Sie den Cache Ihres Browsers, um den Cache zu aktualisieren Stile.
• Testen Sie Ihre Lösung in mehreren Browsern, um die browserübergreifende Kompatibilität sicherzustellen.

Referenz:

• [MDN Web Dokumente - :focus](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)

Das obige ist der detaillierte Inhalt vonWie entferne ich den lästigen blauen Rand von Schaltflächen in Chrome?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!