:valid
La pseudo-classe :valid est utilisée sur les éléments <input> et <form>. Elle permet de mettre en évidence le fait que les données saisies l'ont été correctement.Dans l'exemple qui suit, tant que les données saisies ne sont pas valides, le fond des champs est rouge clair. Il passe au vert clair à partir du moment où les données peuvent être considérées comme bonnes. La couleur de la bordure change de couleur lorsque les deux champs de saisie sont considérés comme valides par le navigateur.
<style>
form {
width: 500px;
padding: 12px;
}
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;
}
</style>
<form>
<label>Veuillez saisir une URL :</label>
<input type="url">
<br>
<br>
<label>Veuillez saisir une adresse électronique :</label>
<input type="email" required>
</form>
Vous pouvez voir sur le même sujet :invalid, :required et :optional.