:valid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

css
input:valid {
  background-color: #ddffdd;
}

Syntaxe

Error: could not find syntax for this item

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

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

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

Specification
HTML
# selector-valid
Selectors Level 4
# valid-pseudo

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:valid
Applies to <form> elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi