: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

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

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

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
# selector-focus
Selectors Level 4
# focus-pseudo

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:focus

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch