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
Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.