Pseudo-classe valid
La pseudo-classe valid définit le style
pour les inputs dans lesquels une valeur correcte
ou une valeur correspondant au type spécifié
a été saisie.
Syntaxe
sélecteur:valid {
}
Exemple
Changeons la couleur de fond d'un input en rose lorsqu'une valeur incorrecte est saisie et en vert lorsque la valeur a passé la validation du type sélectionné :
<p>Saisissez votre email</p>
<p><input type="email"></p>
input:invalid {
background: #E37D76;
}
input:valid {
background: #9DDFA4;
}
:
Voir aussi
-
la pseudo-classe
:invalid,
qui définit le style d'un input dans lequel une valeur incorrecte a été saisie -
la pseudo-classe
:out-of-range,
qui définit le style des éléments dont la valeur est en dehors de la plage -
la pseudo-classe
:in-range,
qui définit le style des éléments avec une plage de valeurs définie
