CSS :focus-visible Pseudo-Klasse

Definition und Verwendung

CSS :focus-visible Pseudo-Klassen werden verwendet, um Fokusstile nur bei Fokussierung über die Tastatur anzuwenden, nicht jedoch bei Fokussierung über die Maus.

Dies kann mit :focus Kombiniert, um verschiedene Fokusstile für Tastatur- und Maus-/Berührungsfokus zu erstellen.

Beispiel

Stellen Sie den Stil der mit der Tab-Taste über die Tastatur fokussierten Schaltflächen aus und konfigurieren Sie sie:

button:focus-visible {
  outline: 2px festes Rot;
}

Versuchen Sie es selbst!

CSS-Syntax

:focus-visible {
  css-Anweisungen;
}

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die den Pseudo-klasse vollständig unterstützt.

Verwandte Seiten

Tutorials:CSS Pseudo-Klassen

Referenz:CSS :focus Pseudo-Klasse