Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

:focus - Sélecteur CSS

:focus

Résumé des caractéristiques du sélecteur :focus

Description rapide
Pseudo-classe désignant la zone de saisie qui a le focus.
Statut
Standard
Module W3C
Sélecteurs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

Statut du document:: REC (recommandation)

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 :

  • :active désigne l'élément cliqué ou touché, pendant le temps où le bouton est enfoncé ou le doigt posé.
  • :hover désigne l'élément sur lequel la souris est positionnée, même si le bouton n'est pas enfoncé.

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.

1
:focus
Estimation de la prise en charge en pourcentage du parc actuel.
97%

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 :
  • Pseudo classe désignant l'élément qui est actif (celui qui est cliqué ou touché).

  • :hover :
  • Pseudo-classe désignant l'élément sur lequel se trouve la souris.

  • :focus :
  • Pseudo-classe désignant la zone de saisie qui a le focus.

  • :focus-visible :
  • 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).

  • :focus-within :
  • Pseudo-classe désignant la zone de saisie qui a le focus, ainsi que le formulaire correspondant.