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

/* 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

Compatibilité des navigateurs

Voir aussi

• :focus-within