:focus
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die :focus
CSS Pseudoklasse repräsentiert ein Element (wie zum Beispiel ein Formulareingabefeld), das den Fokus erhalten hat. Es wird im Allgemeinen ausgelöst, wenn der Benutzer auf ein Element klickt oder tippt oder es mit der Tab-Taste auf der Tastatur auswählt.
Probieren Sie es aus
Hinweis: Diese Pseudoklasse wird nur auf das fokussierte Element selbst angewendet. Verwenden Sie :focus-within
, wenn Sie ein Element auswählen möchten, das ein fokussiertes Element enthält.
Syntax
:focus {
/* ... */
}
Barrierefreiheit
Stellen Sie sicher, dass der visuelle Fokusindikator von Menschen mit eingeschränktem Sehvermögen gesehen werden kann. Dies kommt auch jedem zugute, der einen Bildschirm in einem hell beleuchteten Raum verwendet (wie draußen in der Sonne). WCAG 2.1 SC 1.4.11 Non-Text Contrast erfordert, dass der visuelle Fokusindikator ein Verhältnis von mindestens 3 zu 1 hat.
- Zugängliche visuelle Fokusindikatoren: Geben Sie Ihrer Website etwas Fokus! Tipps für das Design nützlicher und benutzbarer Fokusindikatoren
:focus { outline: none; }
Entfernen Sie niemals einfach das Fokus-Outlining (sichtbarer Fokusindikator), ohne es durch ein Fokus-Outlining zu ersetzen, das die Anforderungen des WCAG 2.1 SC 1.4.11 Non-Text Contrast erfüllt.
- Schneller Tipp: CSS-Outlines niemals entfernen
Beispiele
HTML
<div><input class="red-input" value="I'll be red when focused." /></div>
<div><input class="blue-input" value="I'll be blue when focused." /></div>
CSS
.red-input:focus {
background: yellow;
color: red;
}
.blue-input:focus {
background: yellow;
color: blue;
}
Ergebnis
Spezifikationen
Specification |
---|
HTML Standard # selector-focus |
Selectors Level 4 # focus-pseudo |
Browser-Kompatibilität
BCD tables only load in the browser