We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

La pseudo-classe :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é).

/* Cible n'importe quel élément <input> actif */
input:enabled {
  color: #22AA22;
}

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 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: #22AA22;
}

input:disabled {
  color: #D9D9D9;
}
  

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de ':enabled' dans cette spécification.
Standard évolutif Aucune modification.
HTML5
La définition de ':enabled' dans cette spécification.
Recommendation Définition de la sémantique dans le contexte de HTML et des formulaires.
Selectors Level 4
La définition de ':enabled' dans cette spécification.
Version de travail Aucune modification.
CSS Basic User Interface Module Level 3
La définition de ':enabled' dans cette spécification.
Recommendation proposée Lien vers la spécification des sélecteurs de niveau 3.
Selectors Level 3
La définition de ':enabled' dans cette spécification.
Recommendation Définition de la pseudo-classe mais pas de la sémantique associée.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 Oui1993.1
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple2.1 ? Oui49.53.1 ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, tregagnon, teoli, FredB
Dernière mise à jour par : SphinxKnight,