Pseudo-classe in-range

La pseudo-classe in-range définit le style des éléments dont les valeurs sont comprises dans une plage spécifique. La plage de valeurs doit être définie par les attributs min et max.

Syntaxe

csssélecteur:in-range {

}

Exemple

Définissons une couleur de fond bleu clair pour l'input dans lequel sont saisis des nombres appartenant à la plage de 1 à 5. Définissons également un fond rose lorsque la valeur saisie ne se trouve 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