:focus - Sélecteur CSS
Résumé des caractéristiques du sélecteur :focus
Description de la pseudo-classe :focus
.
La pseudo-classe :focus
désigne l'élément qui a le focus, c'est à dire celui qui reçoit les entrées au clavier.
:focus
peut être concurrencée par plusieurs autres pseudo-classes avec des priorités identiques. On sait que, lorsque
les priorités sont les mêmes, c'est la dernière règle rencontrée qui écrase les autres. Le cas le plus complexe est celui des liens
pour lesquels de nombreuses autres pseudo-classes peuvent interférer (:link
, :visited
, etc).
Reportez-vous à la page :active
pour une indication sur l'ordre à respecter pour les règles qui peuvent entrer en concurrence.
Deux autres pseudo-classes sont relatives aux interactions avec l'utilisateur :
Exemples d'utilisation de :focus
.
L'exemple ci-dessous présente un lien et différentes zones de saisie (texte, cases à cocher, boutons).
En activant l'un ou l'autre de ces éléments avec la souris ou avec la touche tabulation, vous verrez l'effet de la pseudo-classe
:focus
(ici l'ajout d'une bordure rouge).
Compatibilité des navigateurs.
:focus
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi...
Les pseudo-classes qui permettent de désigner un élément en fonction des actions de l'utilisateur sont listées ci-dessous.
:active
::hover
::focus
::focus-visible
::focus-within
:
Pseudo classe désignant l'élément qui est actif (celui qui est cliqué ou touché).
Pseudo-classe désignant l'élément sur lequel se trouve la souris.
Pseudo-classe désignant la zone de saisie qui a le focus.
Pseudo-classe désignant la zone de saisie qui a le focus, mais uniquement si le navigateur matérialise ce focus (par une bordure plus épaisse par exemple).
Pseudo-classe désignant la zone de saisie qui a le focus, ainsi que le formulaire correspondant.