:invalid
La pseudo-classe :invalid est utilisée sur les éléments <input>. Elle permet de mettre en évidence le fait que les données saisies l'ont été correctement. Cette pseudo classe fonctionne également sur un groupe de boutons lorsque l'élément <fieldset> possède l'attribut required.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 :valid, :required et :optional.