:focus CSS-Pseudoklasse
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 CSS Pseudoklasse repräsentiert ein Element (wie ein Formulareingabefeld), das den Fokus erhalten hat. Sie wird im Allgemeinen ausgelöst, wenn der Benutzer auf ein Element klickt oder tippt oder es mit der Tab-Taste der Tastatur auswählt.
Probieren Sie es aus
label {
display: block;
margin-top: 1em;
}
input:focus {
background-color: lightblue;
}
select:focus {
background-color: ivory;
}
<form>
<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>
</form>
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 von Menschen mit eingeschränktem Sehvermögen gesehen werden kann. Dies wird auch jedem helfen, der einen Bildschirm in einem hell erleuchteten Raum verwendet (z. B. außerhalb in der Sonne). WCAG 2.1 SC 1.4.11 Nicht-Text-Kontrast verlangt, dass der visuelle Fokusindikator mindestens 3 zu 1 beträgt.
- Zugängliche visuelle Fokusindikatoren: Geben Sie Ihrer Website etwas Fokus! Tipps zum Entwurf nützlicher und benutzbarer Fokusindikatoren
:focus { outline: none; }
Entfernen Sie niemals einfach den Fokusrahmen (sichtbarer Fokusindikator), ohne ihn durch einen Fokusrahmen zu ersetzen, der die WCAG 2.1 SC 1.4.11 Nicht-Text-Kontrast erfüllt.
- Schneller Tipp: Entfernen Sie niemals CSS-Rahmen
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 |