Wie kann ich den Fokusrahmen aus Eingabetextelementen in Safari und Chrome entfernen?

Entfernen des Fokusrahmens für Eingabetextelemente

Wenn Eingabetextelemente den Fokus erhalten, zeigen bestimmte Browser, einschließlich Safari und Chrome, möglicherweise einen blauen Rahmen an um sie herum. Obwohl dieser visuelle Hinweis für die Zugänglichkeit und Benutzerfreundlichkeit nützlich sein kann, ist er in bestimmten Designlayouts möglicherweise nicht immer wünschenswert.

Um diese Randhervorhebung in Safari zu entfernen, verwenden Sie CSS:

input.middle:focus {
    outline-width: 0;
}

Dies Durch Targeting können Sie das gewünschte Eingabeelement mit der Klasse „Mitte“ isolieren. Um alle Formularelemente zu beeinflussen, verwenden Sie alternativ Folgendes:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

Noah Whitmore schlägt vor, dies auf inhaltsbearbeitbare Elemente auszudehnen:

[contenteditable="true"]:focus {
    outline: none;
}

Letztendlich können Sie auch Fokuskonturen für alle Elemente deaktivieren mit:

*:focus {
    outline: none;
}

Von diesem Ansatz wird jedoch aus Gründen der Barrierefreiheit abgeraten. Denken Sie daran, dass die Fokusübersicht als hilfreicher Indikator für Benutzer dient, die auf der Benutzeroberfläche navigieren.

Das obige ist der detaillierte Inhalt vonWie kann ich den Fokusrahmen aus Eingabetextelementen in Safari und Chrome entfernen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!