Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

:focus

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).

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 { style properties }

Exemples

CSS

.prenom:focus {
  color: red;
}

.nom:focus {
  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
WHATWG 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é Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) 8.0 7.0 1.0
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1) 8.0 6.0 1.0

Étiquettes et contributeurs liés au document

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