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

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

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.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
:validChrome Support complet 10Edge Support complet 12Firefox Support complet 4IE Support complet 10Opera Support complet 10Safari Support complet 5WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 5Samsung Internet Android Support complet 1.0
Applies to <form> elementsChrome Support complet 40Edge Aucun support NonFirefox Support complet 13IE Aucun support NonOpera Support complet 27Safari Support complet 9WebView Android Support complet 40Chrome Android Support complet 40Firefox Android Support complet 14Opera Android Support complet 27Safari iOS Support complet 9Samsung Internet Android Support complet 4.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi

Étiquettes et contributeurs liés au document

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