:out-of-range

La pseudo-classe :out-of-range cible un élément <input> lorsque la valeur de son attribut value est en dehors de l'intervalle autorisé par les attributs min et max attributes. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.

/* Cible n'importe quel élément <input> qui possède un */
/* attribut range et que la valeur associée est en     */
/* dehors de cet intervalle */
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
}

Syntaxe

:out-of-range

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

Compatibilité des navigateurs

Voir aussi

• :in-range
• Le guide de validation des données de formulaire