CSS :focus Pseudo-Klasse
Die CSS-Pseudoklasse :focus wählt fokussierte Elemente aus. Lernen Sie die Pseudoklasse kennen und üben Sie mit Beispielen.
Die :focus-Pseudoklasse wählt ein Element aus und gestaltet es, solange es fokussiert ist — das heißt, solange es das Element ist, das aktuell Tastatureingaben entgegennimmt.
Jeweils nur ein Element auf einer Seite kann den Fokus halten. Formularelemente wie <input>, <button>, <textarea> und Links können durch Tabulatortaste oder Klicken fokussiert werden. Nicht-interaktive Elemente (wie ein <div>) können ebenfalls fokussierbar werden, wenn Sie das Attribut tabindex="0" hinzufügen.
Diese Seite erklärt, wie :focus funktioniert, warum Sie den Fokusindikator fast nie ohne Ersatz entfernen sollten, und stellt die verwandten Pseudoklassen :focus-visible und :focus-within vor, die häufige Probleme lösen, die :focus allein nicht bewältigen kann.
Wie Fokus-Styling funktioniert
Wenn ein Element den Fokus erhält, wendet der Browser standardmäßig einen outline an, damit Tastaturbenutzer sehen können, wo sie sich befinden. Die :focus-Regel ermöglicht es Ihnen, diesen Indikator zu überschreiben oder zu erweitern:
input:focus {
outline: 2px solid #2563eb;
background-color: #eef4ff;
}:focus ist eine dynamische Pseudoklasse: Die Stile gelten nur, während das Element fokussiert ist, und werden aufgehoben, sobald der Fokus woanders hingeht (zum Beispiel wenn der Benutzer zum nächsten Feld wechselt).
Barrierefreiheit
Der visuelle Fokusindikator sollte für alle Benutzer zugänglich sein. Gemäß WCAG 2.1 SC 2.4.7 Focus Visible muss der Fokusindikator klar sichtbar sein und ein Kontrastverhältnis von mindestens 3:1 gegenüber benachbarten Farben aufweisen.
Ein häufiger Fehler ist, den Rahmen für ein „saubereres" Erscheinungsbild vollständig zu entfernen:
/* Don't do this on its own — keyboard users lose all feedback */
:focus {
outline: none;
}Wenn Sie den Standard-outline entfernen, ersetzen Sie ihn immer durch einen benutzerdefinierten Indikator (ein sichtbarer Rahmen, box-shadow oder eine Hintergrundänderung), der die Kontrastanforderung von 3:1 erfüllt:
button:focus {
outline: none;
box-shadow: 0 0 0 3px #2563eb;
}:focus vs :focus-visible
Einfaches :focus wird sowohl bei Mausklicks als auch bei der Tastaturbedienung ausgelöst. Das bedeutet, dass ein Klick auf einen Button einen Fokusring hinterlassen kann — visuell störend für Mausbenutzer, aber unverzichtbar für Tastaturbenutzer.
Die Pseudoklasse :focus-visible löst dieses Problem: Der Browser wendet sie nur an, wenn er entscheidet, dass ein sichtbarer Indikator wirklich nützlich ist, typischerweise bei der Tastaturnavigation. Das empfohlene Muster ist, einen dezenten Hinweis für alle beizubehalten und einen deutlichen Ring nur für :focus-visible:
button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}:focus-within
:focus-within trifft auf ein Element zu, wenn es selbst oder eines seiner untergeordneten Elemente fokussiert ist. Es eignet sich gut dazu, eine ganze Formulargruppe, Karte oder ein Dropdown hervorzuheben, wenn eines seiner Eingabefelder aktiv ist:
.field:focus-within {
border-color: #2563eb;
}Version
Syntax
CSS :focus Syntaxbeispiel
:focus {
css declarations;
}Beispiel des :focus-Selektors:
CSS :focus Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:focus {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
Name:
<input type="text" name="name" /> Surname:
<input type="text" name="surname" />
</form>
</body>
</html>Beispiel des :focus-Selektors mit dem <label>-Tag:
CSS :focus weiteres Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input[type=text] {
width: 100px;
transition: width .2s ease-in-out;
}
input[type=text]:focus {
width: 150px;
background-color: #eee;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
<label for="search">Search:</label>
<input type="text" name="search" id="search" />
</form>
</body>
</html>Verwandte Pseudoklassen
:focus ist eine von mehreren dynamischen Pseudoklassen, die auf Benutzerinteraktionen reagieren. Erkunden Sie die anderen:
:hover— gestaltet ein Element, solange der Zeiger darüber ist.:active— gestaltet ein Element, während es aktiviert wird (im Moment eines Klicks).outline— die Eigenschaft, die am häufigsten verwendet wird, um einen benutzerdefinierten Fokusindikator zu erstellen.