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.
Recommendation proposée Définition de la pseudo-classe mais pas de la sémantique associée.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1012410105
Applies to <form> elements Oui Non13 Non Oui ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ? Oui4105 ?
Applies to <form> elements ? ? Non14 ? ? ?

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,