:enabled

La pseudo-classe :enabled permet de cibler un élément activé. Un élément est activé s'il peut être sélectionné, si on peut cliquer dessus ou si on peut y saisir du texte ou y passer le focus (un élément peut également être dans un état désactivé).

/* Cible n'importe quel élément <input> actif */
input:enabled {
  color: #22AA22;
}

Syntaxe

:enabled

Exemples

Dans cet exemple, les textes des éléments activés seront verts alors que ceux des éléments désactivés seront gris. L'utilisateur peut ainsi reconnaître les éléments avec lesquels interagir.

HTML

<form action="url_of_form">
  <label for="PremierChamp">Premier champ (activé) :</label>
  <input type="text" id="PremierChamp" value="Titi"><br />

  <label for="DeuxiemeChamp">Deuxième champ (désactivé) :</label>
  <input type="text" id="DeuxiemeChamp" value="Toto" disabled="disabled"><br />

  <input type="button" value="Envoyer"/>
</form>

CSS

input:enabled {
  color: #22AA22;
}

input:disabled {
  color: #D9D9D9;
}

Résultat

Spécifications

Spécification	État	Commentaires
HTML Living Standard La définition de ':enabled' dans cette spécification.	Standard évolutif	Aucune modification.
HTML5 La définition de ':enabled' dans cette spécification.	Recommendation	Définition de la sémantique dans le contexte de HTML et des formulaires.
Selectors Level 4 La définition de ':enabled' dans cette spécification.	Version de travail	Aucune modification.
CSS Basic User Interface Module Level 3 La définition de ':enabled' dans cette spécification.	Recommendation	Lien vers la spécification des sélecteurs de niveau 3.
Selectors Level 3 La définition de ':enabled' dans cette spécification.	Recommendation	Définition de la pseudo-classe mais pas de la sémantique associée.

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

:disabled