:focus

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die :focus CSS Pseudoklasse repräsentiert ein Element (wie z.B. ein Formulareingabefeld), 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

css

:focus {
  /* ... */
}

Barrierefreiheit

Stellen Sie sicher, dass der visuelle Fokusindikator für Menschen mit eingeschränktem Sehvermögen sichtbar ist. Dies kommt auch Personen zugute, die einen Bildschirm in einem hell beleuchteten Raum verwenden (wie draußen in der Sonne). WCAG 2.1 SC 1.4.11 Kontrast ohne Text erfordert, dass der visuelle Fokusindikator mindestens 3 zu 1 beträgt.

Zugängliche visuelle Fokusindikatoren: Geben Sie Ihrer Website etwas Fokus! Tipps zum Entwerfen nützlicher und benutzerfreundlicher Fokusindikatoren

`:focus { outline: none; }`

Entfernen Sie niemals nur den Fokusumriss (sichtbarer Fokusindikator), ohne ihn durch einen Fokusumriss zu ersetzen, der den WCAG 2.1 SC 1.4.11 Kontrast ohne Text erfüllt.

Schnelltipps: Niemals CSS-Umrisse entfernen

Beispiele

HTML

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

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