Les pseudo-classes :enabled et :disabled.
Résumé des caractéristiques du sélecteur :enabled
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.
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.
:enabled:disabledNavigateurs 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 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.