Pseudo-classe invalid

La pseudo-classe invalid définit le style pour une saisie dans laquelle une valeur incorrecte ou une valeur ne correspondant pas au type spécifié a été entrée.

Syntaxe

csssélecteur:invalid {

}

Exemple

Changeons la couleur de fond de la saisie en rose lorsqu'une valeur incorrecte est entrée et revenons au vert lorsque la valeur a passé la validation du type sélectionné :

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

cssinput:invalid {
  background: #E37D76;
}
input:valid {
  background: #9DDFA4;
}

Результат:

Voir aussi

la pseudo-classe :valid,
qui définit le style d'une saisie dans laquelle une valeur correcte a été entrée
la pseudo-classe :default,
qui définit le style des éléments par défaut
la pseudo-classe :in-range,
qui définit le style des éléments avec une plage de valeurs spécifiée
la pseudo-classe :out-of-range,
qui définit le style des éléments dont les valeurs sortent de la plage spécifiée