MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

:valid

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

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de ':valid' dans cette spécification.
Standard évolutif Aucune modification.
HTML5
La définition de ':valid' dans cette spécification.
Recommendation Définition de la sémantique relative à HTML et aux contraintes de validation.
Selectors Level 4
La définition de ':valid' dans cette spécification.
Version de travail Aucune modification.
CSS Basic User Interface Module Level 3
La définition de ':valid' dans cette spécification.
Candidat au statut de recommandation Définition de la pseudo-classe mais pas de la sémantique associée.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple pour (<input>) 10.0 20 (12.10240) 4.0 (2) 10 10.0 5.0
Support pour <form> (Oui) Pas de support 13 (13) Pas de support (Oui) ?
Fonctionnalité Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple ? (Oui) 4.0 (2) Pas de support 10.0 5.0
Support pour <form> ? Pas de support 13.0 (13) Pas de support ? ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, viki53, enogael, FredB, teoli, tregagnon
 Dernière mise à jour par : SphinxKnight,