: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 (zum Beispiel ein Formulareingabefeld), das den Fokus erhalten hat. Sie wird normalerweise 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 gilt nur für das fokussierte Element selbst. 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 für Menschen mit Sehbehinderungen erkennbar ist. Dies kommt auch jedem zugute, der einen Bildschirm in einem hell beleuchteten Raum (z. B. draußen in der Sonne) verwendet. WCAG 2.1 SC 1.4.11 Nicht-Text-Kontrast fordert, dass der visuelle Fokusindikator mindestens einen Kontrast von 3:1 hat.
- Barrierefreie visuelle Fokusindikatoren: Give Your Site Some Focus! Tipps für die Gestaltung nützlicher und brauchbarer Fokusindikatoren
:focus { outline: none; }
Entfernen Sie niemals einfach den Fokusrahmen (sichtbaren Fokusindikator), ohne ihn durch einen Fokusrahmen zu ersetzen, der den WCAG 2.1 SC 1.4.11 Nicht-Text-Kontrast erfüllt.
- Schneller Tipp: Entfernen Sie niemals CSS-Outlines
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 # selector-focus |
Selectors Level 4 # focus-pseudo |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:focus |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support