:focus

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

css
: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.

: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.

Beispiele

HTML

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

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

Siehe auch