: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
Error: could not find syntax for this item
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