: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 etwa 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

css
:focus {
  /* ... */
}

Barrierefreiheit

Stellen Sie sicher, dass der visuelle Fokusindikator auch von Menschen mit eingeschränktem Sehvermögen gesehen werden kann. Dies kommt auch allen zugute, die einen Bildschirm in einem hell erleuchteten Raum verwenden (wie draußen in der Sonne). WCAG 2.1 SC 1.4.11 Nicht-Text-Kontrast fordert, dass der visuelle Fokusindikator mindestens 3 zu 1 beträgt.

:focus { outline: none; }

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

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch