CSS :enabled Pseudo Classe
Utilisez la pseudo-classe CSS :enabled pour sélectionner et styliser les éléments activés. Apprenez et pratiquez avec des exemples.
La pseudo-classe CSS :enabled correspond à tout élément de formulaire actuellement activé — c'est-à-dire qu'il peut être déclenché (cliqué, dans lequel on peut saisir du texte, ou mis au point) et peut recevoir une saisie utilisateur. C'est l'opposé direct de :disabled.
Un élément est « activé » lorsqu'il est du type pouvant supporter un état disabled et ne possède pas l'attribut disabled. Cette page couvre les cas où :enabled s'applique, les éléments qu'il affecte, les pièges courants et deux exemples pratiques.
Quels éléments peuvent être activés
:enabled cible uniquement les éléments qui sont réellement capables d'être désactivés. Il s'agit des contrôles de formulaire interactifs :
<button><input>(tous les types)<select><textarea><option><optgroup><fieldset>
Un <div>, un <p> ou un lien ne peuvent jamais être « activés » ou « désactivés » en ce sens, donc :enabled ne les correspondra jamais — même s'ils sont interactifs.
Pourquoi l'utiliser
Par défaut, un contrôle activé apparaît déjà comme actif, il est donc rarement nécessaire d'utiliser :enabled seul. Il devient utile lorsque vous souhaitez un contraste visuel clair entre les contrôles utilisables et inutilisables — par exemple, en éclairant les champs qu'un utilisateur peut remplir tandis que :disabled grise ceux qu'il ne peut pas. Associer les deux pseudo-classes rend l'interactivité d'un formulaire évidente d'un coup d'œil.
Points à surveiller
- État par défaut. Comme les contrôles sont activés par défaut,
:enabledles correspond à moins que vous n'ajoutiez explicitement l'attributdisabled. Définirdisableden HTML ou via JavaScript (element.disabled = true) fait basculer un élément de:enabledà:disabled. <fieldset disabled>se propage. Désactiver un<fieldset>désactive tous les contrôles qu'il contient, de sorte que ces enfants cessent de correspondre à:enabledmême sans leur propre attributdisabled.- La lecture seule n'est pas désactivée. Un
<input readonly>est toujours activé — il correspond à:enabled, pas à:disabled. Utilisez:read-onlypour le style en lecture seule.
Version
Syntaxe
Exemple de syntaxe CSS :enabled
:enabled {
css declarations;
}Exemple du sélecteur :enabled :
Exemple de code CSS :enabled
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 2px 5px;
}
input[type=text]:enabled {
background: #eee;
}
input[type=text]:disabled {
background: #ccc;
}
</style>
</head>
<body>
<h2>:enabled selector example</h2>
<form action="#">
<label for="name">First name:</label>
<input type="text" value="John" id="name" />
<br />
<label for="lastname">Last name:</label>
<input type="text" value="Smith" id="lastname" />
<br />
<label for="country">Country:</label>
<input type="text" disabled="disabled" value="10 High Street" id="country" />
</form>
</body>
</html>Exemple du sélecteur :enabled avec la balise <option> :
Autre exemple de code CSS :enabled
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
option:enabled {
background: #d4f7d4;
color: #064;
}
option:disabled {
background: #f0f0f0;
color: #aaa;
}
</style>
</head>
<body>
<h2>:enabled selector example</h2>
<select>
<option value="paris">Paris</option>
<option value="london" disabled>London</option>
<option value="moscow">Moscow</option>
<option value="rome" disabled>Rome</option>
<option value="berlin">Berlin</option>
</select>
</body>
</html>Notez que les navigateurs limitent la quantité de personnalisation possible pour un <select> et ses éléments <option>, donc le rendu exact de ces couleurs varie selon les navigateurs et les systèmes d'exploitation.
Compatibilité des navigateurs
La pseudo-classe :enabled est prise en charge par tous les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge.
Pseudo-classes associées
:disabled— l'opposé de:enabled; correspond aux contrôles qui ne peuvent pas être utilisés.:read-only— correspond aux contrôles que l'utilisateur ne peut pas modifier (remarque : toujours:enabled).:checked— correspond aux cases à cocher, boutons radio et options sélectionnés.:required— correspond aux contrôles de formulaire devant obligatoirement être remplis.:focus— correspond au contrôle qui a actuellement le focus clavier.