Pseudo-classe :focus-visible CSS

Definizione e uso

CSS :focus-visible I pseudo-classe applicano stili di focus solo quando l'elemento viene focalizzato con la tastiera, non con il mouse.

Questo può essere utilizzato con :focus Utilizzati insieme, creano stili di focus diversi per la tastiera e per il mouse/touch.

Esempio

Seleziona e imposta lo stile dei pulsanti che ottengono l'attenzione tramite la tastiera Tab.

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

Prova da solo

Sintassi CSS

:focus-visible {
  declarazioni css;
}

Dettagli tecnici

Supporto del browser

Le numeri nella tabella indicano la versione del browser che supporta completamente il pseudo-classe.

Pagine correlate

Lezione:Pseudo-classe CSS

Riferimento:Pseudo-classe :focus CSS