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.
CSS Basic User Interface Module Level 3
La définition de ':valid' dans cette spécification.
Recommendation Définition de la pseudo-classe mais pas de la sémantique associée.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 10Edge Support complet 12Firefox Support complet 4IE Support complet 10Opera Support complet 10Safari Support complet 5WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 10Safari iOS Support complet 5Samsung Internet Android ?
Applies to <form> elementsChrome Support complet OuiEdge Aucun support NonFirefox Support complet 13IE Aucun support NonOpera Support complet OuiSafari ? WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet 14Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

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,