Les pseudo-classes :user-valid et :user-invalid.
Résumé des caractéristiques du sélecteur :user-valid
Description des pseudo-classes :user-valid et :user-invalid.
Les pseudo-classes :user-valid et :user-invalid ciblent les zones de saisie dont la valeur est respectivement
valide ou invalide, mais seulement après que l'utilisateur ait interagi avec ces éléments : saisie ou effacement d'un caractère.
La valeur est considérée comme invalide dans les cas suivants :
- La valeur n'est pas conforme au type de donnée défini par l'attribut
type. - Valeur absente alors qu'elle est obligatoire : attribut
requireddans le code HTML. - Valeur en dehors de la fourchette d'acceptation : attributs
minetmaxdans le code HTML. - La valeur ne correspond pas au format de saisie imposé par l'attribut
pattern. - Le nombre de caractères saisis ne correspond pas aux contraintes imposées par les attributs
minlengthetmaxlength.
La différence avec les pseudo-classes :valid et :invalid est subtile : celles-ci s'active dès le chargement de la
page, alors que :user-valid et :user-invalid s'activent seulement après une première action de l'utilisateur
sur la zone de saisie.
Exemples d'utilisation de :user-valid et :user-invalid.
L'intérêt de l'exemple ci-dessous est surtout de montrer la différence de comportement entre :valid et :user-valid.
Pour chacune des zones de saisie, la couleur de l'arrière-plan est gérée par :valid (vert) et :invalid (rouge),
tandis que le contour est géré par :user-valid et :user-invalid.
En conséquence, la couleur d'arrière-plan est mise en place dès l'affichage de la page, tandis que le contour n'apparaîtra que
après la frappe d'un caractère dans chacune des zones de saisie.
D'autre part, pensez bien à tester cet exemple sur Firefox, le seul navigateur qui traite :user-valid
pour le moment (2022).
Prise en charge de :user-valid et :user-invalid.
Les pseudo-classes :user-valid et :user-invalid présentent de nombreux problèmes de compatibilité (2022).
:user-valid:user-invalidNavigateurs 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
Autres pseudo-classes en rapport.
Les pseudo-classes listées ci-dessous sont relatives aux zones de saisie ou à leur état à un moment donné (valides, cochées,
activées, verrouillées, etc.).
Vous pouvez également vous reporter à la spécification CSS du W3C concernant les
sélecteurs.
: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.