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

csssé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é :

html<p>Saisissez votre email</p>
<p><input type="email"></p>

cssinput: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