:focus
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die :focus CSS Pseudoklasse repräsentiert ein Element (wie z. B. eine Formulareingabe), das den Fokus erhalten hat. Sie wird in der Regel 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 Personen mit eingeschränktem Sehvermögen gesehen werden kann. Dies kommt auch allen zugute, die einen Bildschirm in einem hell beleuchteten Raum verwenden (z. B. draußen in der Sonne). WCAG 2.1 SC 1.4.11 Non-Text Contrast erfordert, dass der visuelle Fokusindikator mindestens 3 zu 1 beträgt.
- Barrierefreie visuelle Fokusindikatoren: Geben Sie Ihrer Website etwas Fokus! Tipps für das Design nützlicher und benutzbarer Fokusindikatoren
:focus { outline: none; }
Entfernen Sie niemals einfach die Fokusumrandung (sichtbarer Fokusindikator), ohne sie durch eine Ersatzumrandung zu ersetzen, die den WCAG 2.1 SC 1.4.11 Non-Text Contrast besteht.
- Schneller Tipp: CSS-Umrandungen niemals entfernen
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
| Specification |
|---|
| HTML # selector-focus |
| Selectors Level 4 # focus-pseudo |
Browser-Kompatibilität
Loading…