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
sé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é :
<p>Entrez votre email</p>
<p><input type="email"></p>
input: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
