: focus - CSS-Tricks | CSS-Almanach 2025

Die :focusPseudoklasse in CSS wird zum Stylen eines Elements verwendet, das derzeit von der Tastatur als Ziel ausgewählt oder von der Maus aktiviert wird. Hier ist ein Beispiel:

textarea:focus ( background: pink; )

Jedes Element (am häufigsten s und s) befindet sich im „Fokus“, wenn es ausgewählt ist und zur Eingabe von Text bereit ist (z. B. wenn ein Cursor blinkt). Mausbenutzer können auf sie (oder die zugehörigen label) klicken, um sie zu fokussieren, und Tastaturbenutzer können mit der Tabulatortaste darauf klicken .

"Tabbing"

Eine andere Verwendung der Pseudoklasse :focusist das „Tabbing“ durch Elemente. Viele Browser haben einen Standardfokusstatus für die Registerkartenauswahl, bei dem es sich um einen gepunkteten Umriss handelt. Es ist recht einfach zu entfernen, aber stellen Sie sicher, dass Sie es durch eine geeignete Alternative ersetzen, wenn Sie dies tun.

s, s, s, und textareas alle haben den :focus Zustand standardmäßig, aber Sie können in HTML einem Fokuszustand auf jedes Element geben. Sowohl das contenteditable als auch die tabindex Attribute funktionieren hierfür wie in diesem Beispiel: