:valid
La pseudo-classe :valid permet de cibler tout élément <input> ou <form> dont la validation du contenu s'effectue correctement par rapport au type de donnée attendu. On peut ainsi facilement mettre en forme les champs correctement remplis par l'utilisateur.
input:valid {
background-color: #ddffdd;
}
Syntaxe
Exemples
Cet exemple présente un formulaire dont les éléments se colorent en vert lorsqu'ils sont valides et en rouge lorsqu'ils sont invalides.
CSS
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
input:required:valid {
border-color: #008000;
}
HTML
<form>
<label>Veuillez saisir une URL :</label>
<input type="url" />
<br />
<br />
<label>Veuillez saisir une adresse électronique :</label>
<input type="email" required />
</form>
Résultat
Accessibilité
La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.
Spécifications
| Specification |
|---|
| HTML Standard # selector-valid |
| Selectors Level 4 # validity-pseudos |
Compatibilité des navigateurs
BCD tables only load in the browser