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="Submit" /> </form>
CSS
input:enabled {
color: #22AA22;
}
input:disabled {
color: #D9D9D9;
}
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| WHATWG 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. |
Candidat au statut de recommandation | 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
| Fonctionnalité | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 1.0 | (Oui) | 1.0 (1.7 ou moins) | 9.0 | 9.0 | 3.1 |
| Fonctionnalité | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | 2.1 | (Oui) | 1.0 (1) | 9.0 | 9.5 | 3.1 |