Les pseudo-classes :enabled et :disabled.

Description des pseudo-classes :enabled et :disabled.

Le sélecteur :enabled désigne les éléments de saisie qui sont dans un état actif.
:disabled désigne à l'inverse ceux qui sont dans l'état inactif. Pour obtenir une zone inactive, ajouter l'attribut disabled dans le code HTML.

Ces deux sélecteurs ne concernent que les balises suivantes :

• input : zone de saisie pouvant se présenter comme une simple zone de texte, une case à cocher, un bouton, un bouton d'option, etc.
• textarea : zone de saisie multi-lignes.
• button : un bouton de commande.
• fieldset : un groupe de champs. Cette balise permet de regrouper plusieurs zones de saisie.
• select : un menu déroulant.
• option : un élément de menu déroulant. Le menu peut en effet être actif dans son ensemble mais comporter certaines options désactivées.
• optgroup : un groupe d'option. A l'intérieur d'un menu déroulant, les options peuvent être regroupées avec cette balise. L'ensemble du groupe peut alors être actif ou désactivé.

Remarque: le fait de rendre un élément invisible, avec les propriétés visibility:hidden ou display:none, rend bien cet élément inutilisable pour l'utilisateur, mais n'active pas pour autant la pseudo-classe :disabled.

Exemples d'utilisation du sélecteur :enabled.

En survolant avec la souris les éléments de ces exemples, vous faites apparaître leur code HTML. Cela vous permet de repérer la présence et l'emplacement de l'attribut disabled.

Zones input du type text.

Groupes de champs (balise fieldset).

Zones input du type case à cocher (checkbox) ou bouton radio (radio).

Peu de propriétés sont applicables à ce type d'élément : les arrière-plans et les bordures ne sont pas paramétrables. Nous avons donc utilisé les contours outline pour distinguer les cases à cocher ou bouton radio actifs de ceux qui ne le sont pas.

Boutons de commande.

Modifier la couleur d'arrière-plan des boutons détruit l'effet visuel de réactivité (les boutons réagissent quand la souris les survole). Pour cette raison, nous avons préféré agir sur le contour pour distinguer les boutons actifs des boutons inactifs.

Menus déroulants.

Il n'est pas possible d'appliquer une bordure aux options d'un menu déroulant. Nous avons donc utilisé la couleur d'arrière-plan pour distinguer les éléments actifs de ceux qui ne le sont pas.

Menu globalement actif, mais avec certaines options désactivées : l'attribut disabled est sur une ou plusieurs des balises option.

Menu globalement actif, avec certains groupe d'options désactivés : l'attribut disabled est sur une balise optgroup.

Menu totalement désactivé : l'attribut disabled est positionné sur la balise select :

Zones de saisie multi-lignes (textarea).

Compatibilité des navigateurs.

Les sélecteurs par pseudo-classe :enabled et :disabled sont bien reconnus par tous les navigateurs.

1

Pseudo-classe
:enabled

2

Pseudo-classe
:disabled

Estimation de la prise en charge globale.

97%

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Opéra

Safari

Firefox

Chrome pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique de la pseudo-classe :enabled.

• Sélecteurs - Niveau 3

  Concernant :enabled Introduction des pseudo-classes :enabled et :disabled.
  

  03 Août 1999

  Document de travail.

  

  13 Novembre 2001

  Candidat à la recommandation.

  

  15 Décembre 2009

  Proposé à la recommandation.

  

  29 Septembre 2011

  Recommandation.

• Sélecteurs - Niveau 4

  Concernant :enabled Pas de changement concernant les pseudo-classes :enabled et :disabled.
  

  29 Septembre 2011

  Document de travail.

  

  

  

Voir aussi...

De nombreuses pseudo-classes sont relatives aux zones de saisie et à leur état à un moment donné (activées, verrouillées, etc.) Reportez-vous aux pseudo-classes listées ci-dessous pour en savoir plus.