CSS :focus-visible-pseudo-klassen

Definition och användning

CSS :focus-visible Pseudo-klasser används för att tillämpa fokusstilar endast när fokus erhålls genom tangentbord, inte genom mus.

Detta kan användas med :focus Använd tillsammans, skapa olika fokusstilar för tangentbords- och mus/touchoch fokus.

Exempel

Välj och ställ in stilen för knappar som får fokus genom tangentbordets Tab-tangent:

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

Prova själv

CSS-syntax

:focus-visible {
  css-uttryck;
}

Tekniska detaljer

Version: CSS4

Webbläsarstöd

Tabellen siffror anger den första webbläsarversion som fullständigt stöder den här pseudo-klassen.

Chrome Edge Firefox Safari Opera
86 86 85 15.4 72

Relaterade sidor

Lär dig:CSS pseudoklasser

Referens:CSS :focus pseudoklass