:out-of-range

La pseudo-classe :out-of-range cible un élément lorsque la valeur de son attribut value est en dehors de l'intervalle autorisé pour l'élément. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.

Note : Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.

Syntaxe

:out-of-range { style properties }

Exemples

HTML

<form action="" id="form1">
  <ul>Les valeurs entre 1 et 10 sont autorisées.
    <li>
      <input id="valeur1" name="valeur1" type="number" placeholder="1 à 10" min="1" max="10" value="12">
      <label for="valeur1">Votre valeur est </label>
    </li>
  </ul>
</form>

CSS

li {
  list-style: none;
  margin-bottom: 1em;
}
input {
  border: 1px solid black;
}
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}
input:in-range + label::after {
  content:' OK';
}
input:out-of-range + label::after {
    content:'hors des limites !';
}

Résultat

Spécifications

Spécification État Commentaires
WHATWG HTML Living Standard
La définition de ':out-of-range' dans cette spécification.
Standard évolutif Définition de la correspondance entre :out-of-range et les éléments HTML.
Selectors Level 4
La définition de ':out-of-range' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
input 10.0 29.0 (29.0) Pas de support 11.0 5.2
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
input 2.3 16.0 (16.0) Pas de support (Oui) (Oui)

Voir aussi

Étiquettes et contributeurs liés au document

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