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
sé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 :
<form>
<p>Entrez un nombre de 1 à 5</p>
<p>
<input type="number" min="1" max="5" value="1">
</p>
</form>
input:in-range {
background: #C2DDFD;
}
input:out-of-range {
background: #E37D76;
}
:
Voir aussi
-
la pseudo-classe
:out-of-range,
qui définit le style des éléments dont les valeurs dépassent la plage -
la pseudo-classe
:valid,
qui définit le style de l'input dans lequel une valeur correcte a été saisie -
la pseudo-classe
:invalid,
qui définit le style de l'input dans lequel une valeur incorrecte a été saisie
