:enabled
Baseline
Widely available
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
css
: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
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
css
input:enabled {
color: #22bb22;
}
input:disabled {
color: #aaaaaa;
}
Résultat
Spécifications
| Specification |
|---|
| HTML # selector-enabled |
| Selectors Level 4 # enabled-pseudo |
Compatibilité des navigateurs
Voir aussi
- La pseudo-classe
:disabled