: utilisateur invalide - Astuces CSS

Le :user-invalidest une pseudo-classe CSS qui est en cours de proposition dans le CSS Selectors Niveau 4 projet de travail qui sélectionne un élément de forme selon que la valeur comme entrée par un utilisateur est valide lorsqu'elle est cochée contre la ce qui est spécifié comme une valeur acceptée dans le balisage HTML après que l'utilisateur final a interagi avec le formulaire au-delà de cette entrée. En fait, elle :user-invalida été appelée «pseudo-classe d'interaction utilisateur» car elle est unique dans l'identification d'une action utilisateur lors de la sélection d'un élément.

Prenez le balisage HTML suivant pour un formulaire de base avec un champ numérique:

Quantité:

La plage numérique définie par le balisage HTML pour l'entrée est comprise entre 1et 10mais la valeur par défaut a été définie sur 11. Cela signifie que la valeur est invalide dès que le formulaire se charge.

Cependant, la :user-invalidpseudo-classe ne prendra effet qu'après que l'utilisateur ait réellement interagi avec le formulaire au-delà de sa saisie dans le champ. Cette interaction fait la différence entre :user-invalidet :invalid. Le même principe s'applique aux valeurs de formulaire entrées définies par :in-range, :out-of-rangeet :required.

Une fois que la valeur que l'utilisateur a saisie est déterminée comme étant une entrée non valide, nous pouvons sélectionner l'élément:

input:user-invalid ( color: red; )

L'image suivante illustre les différents états entre :validet :user-invalidbasés sur l'exemple HTML ci-dessus.

La différence entre une valeur valide (à gauche) et une valeur non valide entrée par un utilisateur après avoir interagi avec le formulaire.

La chose déroutante ici est à quel point :invalidet :user-invalidsont étroitement liés . S'ils sont utilisés ensemble, il peut être difficile de distinguer les deux:

input:invalid ( color: red; ) input:user-invalid ( color: red; )

La différence entre `:invalid`(centre) et une valeur invalide saisie par un utilisateur (à droite) peut être difficile à distinguer

Utiliser l'un sur l'autre ou avoir un style distinct entre les deux pourrait s'avérer une meilleure expérience utilisateur dans un cas d'utilisation réel.