La pseudo-classe :focus permet de cibler un élément lorsque celui-ci reçoit le focus (soit il est sélectionné à l'aide du clavier, soit il est activé avec la souris comme par exemple le champ d'un formulaire).

/* Cible n'importe quel élément <input> */
/* uniquement lorsqu'il a le focus */
input:focus {
  color: red;
}

Cette pseudo-classe ne s'applique qu'aux éléments avec le focus, elle ne s'applique pas à ses parents (comme :checked, :enabled mais pas comme :active ou :hover).

Syntaxe

:focus

Exemples

CSS

.prenom:focus {
  background: yellow;
  color: red;
}

.nom:focus {
  background: yellow;
  color: lime;
}

HTML

<input class="prenom" value="Rouge si focus">
<input class="nom" value="Vert si focus">

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de ':focus' dans cette spécification.
Standard évolutif Définition de la sémantique relative à HTML.
Selectors Level 4
La définition de ':focus' dans cette spécification.
Version de travail Aucune modification.
Selectors Level 3
La définition de ':focus' dans cette spécification.
Recommendation Aucune modification.
CSS Level 2 (Revision 1)
La définition de ':focus' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 Oui1871
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple1 ? Oui461 ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, tregagnon, teoli, FredB, ThePrisoner
Dernière mise à jour par : SphinxKnight,