CSS :in-range Pseudo-Classe
La pseudo-classe CSS :in-range sélectionne les éléments dont la valeur est dans les limites définies par min et max. Exemples pratiques.
La pseudo-classe CSS :in-range correspond à un élément <input> dont la valeur actuelle est à l'intérieur de la plage définie par ses attributs min et max. Elle vous permet de styliser un champ différemment tant que la saisie de l'utilisateur reste valide, offrant un retour visuel instantané sans une seule ligne de JavaScript.
Cette page explique quand :in-range s'applique, les types de champs avec lesquels elle fonctionne, des exemples de mise en forme pratiques, et comment elle se rapporte aux pseudo-classes de validation avec lesquelles elle est associée.
Quand le sélecteur s'applique
:in-range ne concerne que les contrôles de formulaire qui peuvent exprimer une plage. Un contrôle est soumis à une plage lorsqu'il accepte une contrainte min et/ou max. Si un contrôle ne possède pas une telle contrainte, il ne peut être ni « dans la plage » ni hors de la plage — aucune de ces deux pseudo-classes ne le correspondra jamais.
:in-range fonctionne sur les éléments <input> qui prennent en charge min/max : type="number", type="range", type="date", type="month", type="week", type="time" et type="datetime-local". Un champ texte, une case à cocher ou un bouton ne sera jamais dans la plage.
Un champ est dans la plage lorsque les trois conditions suivantes sont réunies :
- le type d'entrée prend en charge
min/max, - au moins l'un des attributs
minoumaxest défini, - la valeur actuelle est comprise entre les limites (incluses).
Dès que la valeur dépasse une limite, elle cesse de correspondre à :in-range et commence à correspondre à :out-of-range à la place. Les deux pseudo-classes sont mutuellement exclusives, ce qui les rend parfaitement complémentaires pour un style « valide vs. invalide ».
Syntaxe
:in-range {
/* style declarations */
}En pratique, vous la qualifiez presque toujours avec input (ou un sélecteur plus spécifique) afin de ne cibler que les contrôles voulus :
input:in-range {
border-color: green;
}Styliser un champ dans la plage
L'exemple ci-dessous encadre un champ numérique tant que sa valeur reste dans 1–10. Essayez de changer la valeur en 0 ou 15 dans l'éditeur : le style de bordure disparaît car le champ n'est plus dans la plage.
<!DOCTYPE html>
<html>
<head>
<title>:in-range example</title>
<style>
input:in-range {
border: 2px solid #666;
}
</style>
</head>
<body>
<h2>:in-range selector example</h2>
<form>
<input type="number" min="1" max="10" value="5" />
</form>
</body>
</html>Associer in-range avec out-of-range
Comme les deux états ne se chevauchent jamais, un schéma courant consiste à styliser les deux simultanément : vert lorsque la valeur est valide, rouge dès qu'elle sort de la plage autorisée.
<!DOCTYPE html>
<html>
<head>
<title>:in-range and :out-of-range</title>
<style>
input:in-range {
border: 2px solid green;
}
input:out-of-range {
border: 2px solid red;
}
</style>
</head>
<body>
<label>Quantity (1–10):</label>
<input type="number" min="1" max="10" value="5" />
</body>
</html>Combinaison avec d'autres pseudo-classes
:in-range peut être chaînée avec d'autres pseudo-classes — par exemple :hover ou :focus — pour affiner davantage le retour visuel :
input:in-range:focus {
outline: 2px solid green;
}Remarques et pièges
:in-rangereflète la valeur actuelle, donc le style se met à jour en temps réel au fur et à mesure que l'utilisateur tape ou déplace un curseur.- Un champ vide avec un
min/maxest considéré dans la plage (il n'y a pas de valeur pour violer la limite), donc combinez-le avec:requiredsi une valeur vide doit être traitée comme invalide. minetmaxne contraignent le style qu'ici — ils sont toujours appliqués par les pseudo-classes de validation natives telles que:validet:invalidlors de la soumission du formulaire.