Sélecteur :IN-RANGE
Rôle
Le sélecteur in-range est une pseudo-classe désigné par la syntaxe :in-range qui permet de cibler chaque élément de formulaire qui s’utilise avec une gamme de valeur (min et max) et dont la valeur est dans cette plage.
Note: pour créer une gamme de valeur sur un élément de formulaire, utilisez l’attribut HTML min et max. Fonctionne avec les balises input de types : number, range, date, datetime, datetime-local, month, time, week (attention, est pris en charge qu’à partir de IE-10 et n’est pas pris en charge par Opera).
<input type="number" min="5" max="99">
Dans l’exemple ci-dessous, le champ apparaît avec un fond jaune si vous tapez manuellement une valeur comprise entre 5 et 10.
input:in-range{
background-color: yellow;
}
Nombre : <input type="number" min="5" max="10">
Inconvénient
Le style s’applique sur la cible même si vous ne saisissez rien
Testez vous-même ce sélecteur
Version : CSS3
Compatibilité
Le sélecteur in-range n’est pas pris en charge par Internet Explorer
A voir aussi
:required
:enabled
:checked
:invalid
:valid
:disabled
:read-only
:read-write
:optional
:out-of-range
