Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >:focus

:focus

Selektor:focus

Gilt für das Element, das gerade die Tastatureingabe empfängt: ein Formularfeld, in das der Nutzer tippt, oder ein mit der Tab-Taste gewählter Link oder Button. Den Fokus hat auf der Seite immer höchstens ein Element.

Werte

Den Fokus bekommen können:

  • Links mit Attribut href, Buttons, Formularfelder, <summary> und Elemente mit contenteditable,
  • jedes Element mit tabindex="0" (auch per Tab-Taste) oder tabindex="-1" (nur per Skript mit focus()).

Beispiele

Ein Feld, in das getippt wird, hat einen blauen Rahmen und einen hellen Umriss:

<input class="field" type="text" placeholder="Name">

.field {
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
}
.field:focus {
  border-color: #0088d1;
  outline: 3px solid #b3e5fc;
}
Ergebnis
Ergebnis – mit Fokus

Worauf Sie achten sollten

  • Schreiben Sie nie :focus { outline: none; } ohne Ersatz – Tastaturnutzer sehen dann nicht, wo auf der Seite sie sich befinden (WCAG 2.4.7).
  • :focus gilt auch nach einem Mausklick, wo kaum jemand einen Umriss am Button haben will. Ein kräftiger Umriss gehört deshalb eher in :focus-visible.
  • Ob ein Mausklick einem Button oder Link den Fokus gibt, hängt von Browser und System ab – unter macOS geben ihn laut MDN weder Safari noch Firefox. Verlassen Sie sich nach einem Klick also nicht auf :focus.
  • Ein Element, das keinen Fokus haben kann (div, span ohne tabindex), bekommt :focus auch nach focus() aus einem Skript nicht.

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
:focus-visible
:focus-within
outline
outline-offset
:hover