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 :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
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.
:autofill: Pseudo-classe désignant les éléments de saisie dont le contenu a été renseigné automatiquement par le navigateur.:blank: Pseudo classe désignant les zones de saisie vides.:checked: Pseudo-classe désignant les cases à cocher (ou boutons radio) qui sont cochés, ainsi que les éléments de menu sélectionnés.:default: Pseudo-classe désignant les cases à cocher et boutons radio qui sont cochés par défaut.:disabled: Pseudo-classe désignant les zones de saisie veerrouillées.:enabled: Pseudo-classe désignant les zones de saisies non verrouillées.:indeterminate: Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.:in-range: Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.:invalid: Pseudo classe désignant les zones de saisie contenant une information invalide.:optional: Pseudo élément désignant les zones de saisie non obligatoires.:out-of-range: Pseudo-classe désignant les zones de saisie dont la valeur est en dehors de la plage autorisée.:placeholder-shown: Pseudo-classe désignant les zones de saisie comportant un texte d'aide.:read-only: Pseudo-classe désignant les zones de saisie en lecture seule.:read-write: Pseudo-classe désignant les zones de saisie en lecture écriture.:required: Pseudo-classe désignant les zones de saisie obligatoires.:user-invalid: Pseudo-classe désignant les zones de saisie dont la valeur est invalide.:user-valid: Pseudo-classe désignant les zones de saisie dont la valeur est valide.:valid: Pseudo-classe désignant les zones de saisie contenant une information valide.