: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…