Pseudo-classe out-of-range

La pseudo-classe out-of-range définit le style des éléments dont les valeurs sont en dehors de la plage spécifiée. La plage de valeurs doit être définie par les attributs min et max.

Syntaxe

csssélecteur:out-of-range {
  
}

Exemple

Définissons une couleur bleue pour l'arrière-plan d'un input dans lequel sont saisis des nombres appartenant à la plage de 1 à 5. Définissons également un arrière-plan rose lorsque la valeur saisie n'est pas dans la limite choisie :

html<form>
  <p>Entrez un nombre de 1 à 5</p>
  <p>
    <input type="number" min="1" max="5" value="1">
  </p>
</form>

cssinput:in-range {
  background: #C2DDFD;
}
input:out-of-range {
  background: #E37D76;
}

Результат:

Voir aussi