Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Pseudo-classe CSS :enabled
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La pseudo-classe CSS :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é).
Exemple interactif
label {
display: block;
margin-top: 1em;
}
*:enabled {
background-color: gold;
}
<form>
<label for="name">Nom :</label>
<input id="name" name="name" type="text" />
<label for="emp">Employé :</label>
<select id="emp" name="emp" disabled>
<option>Non</option>
<option>Oui</option>
</select>
<label for="empDate">Date d'embauche :</label>
<input id="empDate" name="empDate" type="date" disabled />
<label for="resume">CV :</label>
<input id="resume" name="resume" type="file" />
</form>
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·ice 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: #22bb22;
}
input:disabled {
color: #aaaaaa;
}
Résultat
Spécifications
| Spécification |
|---|
| HTML> # selector-enabled> |
| Selectors Level 4> # enabled-pseudo> |
Compatibilité des navigateurs
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Voir aussi
- La pseudo-classe
:disabled
Aider à améliorer MDN
Cette page a été modifiée le par les contributeur·ice·s du MDN.