Pseudo-classe CSS :valid
La pseudo-classe CSS :valid cible les contrôles de formulaire dont la valeur passe la validation. Découvrez son fonctionnement avec des exemples pratiques.
La pseudo-classe :valid correspond à tout contrôle de formulaire (tel que <input>, <select> ou <textarea>) dont la valeur actuelle passe la validation de contraintes intégrée de l'élément. Elle vous offre un moyen purement CSS de réagir à l'acceptabilité des données d'un champ — sans JavaScript.
Un contrôle est ciblé par :valid lorsqu'il possède des contraintes de validation et que sa valeur les satisfait toutes. Voici les cas les plus courants :
- Un
<input type="email">contenant une adresse correctement formatée. - Un
<input type="number">dont la valeur se situe dans la plagemin/max. - Un champ
type="url",type="date"outype="tel"contenant des données bien formées. - Un champ avec un attribut
patterndont la valeur correspond à l'expression régulière. - Un champ
requiredqui n'est pas vide.
Cette pseudo-classe est le pendant de :invalid. Ensemble, elles permettent de fournir un retour visuel immédiat pendant la saisie. Elle est aussi étroitement liée à :required, :optional et :in-range.
Points importants
- Un contrôle sans aucune contrainte (par exemple un simple
<input type="text">sansrequired,patternni limite de longueur) est toujours considéré comme valide — il correspondra à:validmême lorsqu'il est vide. - La correspondance se met à jour en temps réel pendant la saisie, et non seulement à la soumission, ce qui peut provoquer des changements de style saccadés. Pour retarder ce retour visuel, combinez-la avec
:focusou les pseudo-classes:user-invalid/:user-valid. - La spécificité est importante :
input:validetinput:invalidont la même spécificité, donc la règle déclarée plus tard dans la feuille de style l'emporte pour les cas ambigus. Veillez à maintenir un ordre intentionnel.
Version
Syntaxe
Syntaxe CSS :valid
:valid {
css declarations;
}Exemple du sélecteur :valid :
Exemple de code CSS :valid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 1px solid #cccccc;
padding: 5px 10px;
}
input:valid {
background-color: #eeeeee;
}
</style>
</head>
<body>
<h2>:valid selector example</h2>
<form>
<input type="email" value="[email protected]" />
</form>
</body>
</html>Dans cet exemple, le fond gris disparaît dès qu'une adresse e-mail invalide est saisie, car le champ ne correspond plus à :valid.
Exemple avec des champs obligatoires et un indicateur vert
Un schéma courant consiste à associer :valid à :invalid afin que chaque champ affiche clairement un état « bon / pas encore ». Ici, les champs obligatoires deviennent verts une fois qu'ils contiennent des données acceptables, et rouges dans le cas contraire :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
padding: 6px 10px;
margin-bottom: 10px;
display: block;
border: 2px solid #cccccc;
}
input:valid {
border-color: #2eca6a;
}
input:invalid {
border-color: #e3382c;
}
</style>
</head>
<body>
<h2>Valid vs. invalid fields</h2>
<form>
<input type="email" placeholder="Email" required />
<input type="number" min="1" max="10" placeholder="1 to 10" required />
</form>
</body>
</html>Les deux champs étant required, ils correspondent initialement à :invalid (vides), puis passent à :valid dès que vous saisissez un e-mail valide et un nombre compris entre 1 et 10.
Pseudo-classes associées
:invalid— l'exact opposé : cible les contrôles qui échouent à la validation.:requiredet:optional— ciblent selon qu'un contrôle est obligatoire ou non.:in-range— cible les champs numériques/date dont la valeur est comprise dans la plagemin/max.