Pseudo-classe :focus-visible CSS

Définition et utilisation

CSS :focus-visible Les pseudo-classes sont utilisées pour appliquer des styles de focus uniquement lorsque l'élément est focalisé via le clavier, et non via la souris.

Cela peut être utilisé avec :focus En combinaison, créez des styles de focus différents pour le focus au clavier et le focus au curseur/touche.

Exemple

Sélectionnez et définissez le style des boutons qui obtiennent le focus via la touche Tab du clavier :

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

Essayez-le vous-même

Syntaxe CSS

:focus-visible {
  déclarations css;
}

Détails techniques

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette pseudo-classe en totalité.

Pages associées

Tutoriel :Pseudo-classe CSS

Référence :Pseudo-classe :focus CSS