CSS :focus-visible pseudoklasse

Definitie en gebruik

CSS :focus-visible Pseudoklassen worden gebruikt om focusstijlen toe te passen alleen wanneer gefocust via het toetsenbord, niet via de muis.

Dit kan worden gecombineerd met :focus Gebruik in combinatie, om verschillende focusstijlen te creëren voor toetsenbord- en muis/touch focus.

Voorbeeld

Selecteer en stel de stijl in van de knoppen die via de Tab-toets gefocust kunnen worden met het toetsenbord:

button:focus-visible {
  outline: 2px solid red;
}

Probeer het zelf uit

CSS syntaxis

:focus-visible {
  css declaraties;
}

Technische details

Versie: CSS4

Browserondersteuning

De cijfers in de tabel specificeren de eerste browserversie die deze pseudoklasse volledig ondersteunt.

Chrome Edge Firefox Safari Opera
86 86 85 15.4 72

Gerelateerde pagina's

Handleiding:CSS pseudoklassen

Referentie:CSS :focus pseudoklasse