Les pseudo-classes :in-range et :out-of-range.
Résumé des caractéristiques du sélecteur :in-range
Description des pseudo-classes :in-range et :out-of-range.
La pseudo-classe :in-range cible les éléments (zones de saisie) dont la valeur est dans la plage autorisée.
A l'inverse :out-of-range cible les éléments dont la valeur est en dehors de la plage autorisée.
La plage des valeurs autorisée est définie par les attributs min et max d'une balise input.
Remarque. La vérification de la valeur se fait au moment de la validation du formulaire : les balises form et
/form doivent donc être présentes.
Un bouton submit est également conseillé pour faciliter la demande de validation.
L'exemple ci-dessous est le code HTML minimal pour obtenir le fonctionnement.
A droite vous pouvez constater le fonctionnement de base (sans styles CSS) en tapant des valeurs hors plage et en cliquant sur le
bouton OK.
<form method="post" action="" >
<input type="number" min="18" max="65" />
<input type="submit" value="ok"/>
</form>
La norme prévoit que les zones de saisies qui ne comportent ni d'attribut min ni d'attribut max ne soient
ciblées ni par :in-range, ni par :out-of-range.
Dans la pratique, certains navigateurs considèrent que leur valeur est toujours dans la plage autorisée (puisqu'il n'y a pas de
limites définies), et les font cibler par :in-range.
De nombreux types de zones de saisie comportent les attributs min et max,
mais l'utilisateur n'a pas la possibilité de saisir une valeur hors de ces limites.
C'est le cas des sliders (input type="range" /), des zones de saisie de date, etc.
Pour ces éléments, c'est toujours le sélecteur :in-range qui est activé en permanence.
Exemples d'utilisation de :in-range et :out-of-range.
Vous constaterez, avec l'exemple ci-dessous, que les pseudo-classes :in-range et :out-of-range s'activent sans
qu'il soit nécessaire de valider le formulaire, par exemple en cliquant sur le bouton de validation.
D'autre part, l'absence de saisie est considérée comme correcte, et active :in-range.
(Pour rendre une saisie obligatoire, voir l'attribut required et la pseudo-classe correspondante : ).
Pour la zone de saisie du type date, mois et semaine, vous devrez saisir une date au clavier : les listes déroulantes ne vous permettront pas de saisir une valeur en dehors de la plage autorisée.
Prise en charge de :in-range et :out-of-range.
Les pseudo-classes :in-range et :out-of-range ne posent pas de problème de compatibilité avec les navigateurs actuels.
:in-range:out-of-rangeNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
Opéra Mobile
KaiOS Browser
Samsung Internet
Opéra
Safari
Safari sur IOS
Chrome
Firefox
Edge
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Voir aussi...
Les pseudo-classes relatives à l'état des zones de saisie sont listées ci-dessous. Vous pouvez vous reporter à leur description pour plus de détails.