Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

:valid

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.

Syntaxe

:valid { style properties }

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:valide {
  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
WHATWG 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 Firefox (Gecko) Internet Explorer Opera Safari
Support simple 10.0 4.0 (2) 10[1] 10.0 5.0
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple ? 4.0 (2) Pas de support 10.0 5.0

[1] Uniquement pour les éléments <input>.

Voir aussi

Étiquettes et contributeurs liés au document

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