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 : :required
).
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-range
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Omé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.
:autofill
: Pseudo-classe désignant les éléments de saisie dont le contenu a été renseigné automatiquement par le navigateur.:blank
: Pseudo classe désignant les zones de saisie vides.:checked
: Pseudo-classe désignant les cases à cocher (ou boutons radio) qui sont cochés, ainsi que les éléments de menu sélectionnés.:default
: Pseudo-classe désignant les cases à cocher et boutons radio qui sont cochés par défaut.:disabled
: Pseudo-classe désignant les zones de saisie veerrouillées.:enabled
: Pseudo-classe désignant les zones de saisies non verrouillées.:indeterminate
: Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.:in-range
: Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.:invalid
: Pseudo classe désignant les zones de saisie contenant une information invalide.:optional
: Pseudo élément désignant les zones de saisie non obligatoires.:out-of-range
: Pseudo-classe désignant les zones de saisie dont la valeur est en dehors de la plage autorisée.:placeholder-shown
: Pseudo-classe désignant les zones de saisie comportant un texte d'aide.:read-only
: Pseudo-classe désignant les zones de saisie en lecture seule.:read-write
: Pseudo-classe désignant les zones de saisie en lecture écriture.:required
: Pseudo-classe désignant les zones de saisie obligatoires.:user-invalid
: Pseudo-classe désignant les zones de saisie dont la valeur est invalide.:user-valid
: Pseudo-classe désignant les zones de saisie dont la valeur est valide.:valid
: Pseudo-classe désignant les zones de saisie contenant une information valide.