:enabled
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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
Loading…