CSS-Pseudoklasse :focus
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die :focus-Pseudoklasse in CSS steht für ein Element (beispielsweise ein Formulareingabefeld), das den Fokus erhalten hat. Sie wird in der Regel aktiviert, wenn ein Benutzer auf ein Element klickt oder tippt oder es mit der Tab-Taste auswählt.
Probieren Sie es aus
label {
display: block;
margin-top: 1em;
}
input:focus {
background-color: lightblue;
}
select:focus {
background-color: ivory;
}
<p>Which flavor would you like to order?</p>
<label>Full Name: <input name="firstName" type="text" /></label>
<label
>Flavor:
<select name="flavor">
<option>Cherry</option>
<option>Green Tea</option>
<option>Moose Tracks</option>
<option>Mint Chip</option>
</select>
</label>
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
:focus {
/* ... */
}
Barrierefreiheit
Stellen Sie sicher, dass der visuelle Fokusindikator für Menschen mit eingeschränktem Sehvermögen erkennbar ist. Davon profitieren auch alle, die einen Bildschirm in einer hell beleuchteten Umgebung verwenden (beispielsweise draußen in der Sonne). WCAG 2.1 SC 1.4.11: Kontrast von Nicht-Text-Inhalten verlangt für den visuellen Fokusindikator ein Kontrastverhältnis von mindestens 3:1.
- Barrierefreie visuelle Fokusindikatoren: Geben Sie Ihrer Website Fokus! Tipps zur Gestaltung nützlicher und gut verwendbarer Fokusindikatoren
:focus { outline: none; }
Entfernen Sie niemals einfach die Fokusumrandung (den sichtbaren Fokusindikator), ohne sie durch eine Fokusumrandung zu ersetzen, die WCAG 2.1 SC 1.4.11: Kontrast von Nicht-Text-Inhalten erfüllt.
- Kurztipp: Entfernen Sie niemals CSS-Umrandungen
Beispiele
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
.red-input:focus {
background: yellow;
color: red;
}
.blue-input:focus {
background: yellow;
color: blue;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # selector-focus |
| Selectors Level 4 # focus-pseudo |