CSS :out-of-range Pseudo-Classe
La pseudo-classe CSS :out-of-range sélectionne les éléments dont la valeur est hors des limites définies par les attributs min et max. Exemples inclus.
La pseudo-classe CSS :out-of-range correspond à un champ de formulaire dont la valeur actuelle est en dehors de la plage autorisée définie par ses attributs min et/ou max. Elle vous permet de donner à l'utilisateur un retour visuel immédiat — une bordure rouge, une couleur d'avertissement, un message indicatif — dès qu'il saisit un nombre trop petit ou trop grand, sans aucun JavaScript.
Cette page explique précisément à quels éléments :out-of-range s'applique, en quoi elle diffère de :in-range et :invalid, et présente des exemples exécutables que vous pouvez copier.
:out-of-range ne correspond qu'aux éléments <input> possédant un attribut min et/ou max et supportant les contraintes de plage — c'est-à-dire type="number", type="range", et les types date/heure (date, month, week, time, datetime-local). Sur tout autre input, elle ne correspond jamais.
Quand la pseudo-classe s'applique
Un champ est « hors plage » lorsque toutes les conditions suivantes sont réunies :
- Il possède un attribut
minet/oumax. - Il contient actuellement une valeur que le navigateur peut analyser.
- Cette valeur est inférieure à
minou supérieure àmax.
Quelques conséquences à retenir :
- Les champs vides ne correspondent jamais. Sans valeur, il n'y a rien à comparer, donc
:out-of-rangeestfalse(et:in-rangeest égalementfalse). - Il s'agit uniquement de la plage numérique/date. Une erreur de
step(par exemple1.5quandstep="1") rend l'input:invalid, mais ne le rend pas:out-of-range. - La pseudo-classe se met à jour en temps réel pendant que l'utilisateur modifie le champ, les styles basculent donc instantanément.
Version
Syntaxe
:out-of-range {
/* css declarations */
}On l'associe presque toujours au type d'input pour plus de clarté :
input:out-of-range {
border: 3px solid #d9534f;
}Exemple du sélecteur :out-of-range
Le champ ci-dessous accepte les mois 1–12, mais démarre à 15, ce qui entraîne la mise en évidence de la bordure au chargement. Changez la valeur pour quelque chose compris entre 1 et 12 et la mise en évidence disparaît.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:out-of-range {
border: 3px solid #8ebf42;
}
</style>
</head>
<body>
<h2>:out-of-range selector example</h2>
<form>
<input type="number" min="1" max="12" value="15" />
</form>
</body>
</html>Associer :out-of-range et :in-range
:out-of-range et :in-range sont des opposés : au plus l'une d'elles correspond à un instant donné, et aucune ne correspond à un champ vide. Styliser les deux offre une interface complète « valeur valide / valeur invalide » :
<!DOCTYPE html>
<html>
<head>
<title>In-range and out-of-range</title>
<style>
input:in-range {
border: 2px solid #2e8b57;
}
input:out-of-range {
border: 2px solid #d9534f;
background-color: #fde9e9;
}
</style>
</head>
<body>
<label>Pick a quantity (1–10):</label>
<input type="number" min="1" max="10" value="25" />
</body>
</html>:out-of-range vs :invalid
Ces deux pseudo-classes sont souvent confondues. :invalid est la règle la plus large — elle correspond à toute contrainte non respectée, y compris une valeur required manquante, un e-mail mal formé, ou une erreur de step. :out-of-range est plus restrictive : elle ne se déclenche que pour une valeur inférieure à min ou supérieure à max.
Une valeur hors plage est également invalide, donc :invalid y correspond aussi. Utilisez :out-of-range lorsque vous souhaitez spécifiquement indiquer à l'utilisateur « ce nombre est trop grand/petit » plutôt qu'une erreur générique. Consultez :invalid et :valid pour les pseudo-classes de validation plus générales.
:out-of-range stylise le champ mais ne bloque pas la soumission du formulaire par lui-même. Combinez-la avec la validation native (le navigateur bloque la soumission d'une valeur hors plage lorsque min/max sont définis) ou des vérifications côté serveur. Ne comptez jamais sur CSS seul pour l'intégrité des données.
Pseudo-classes associées
:in-range— l'opposé de ce sélecteur.:validet:invalid— correspondent à la validité globale d'un contrôle de formulaire.:requiredet:optional— correspondent selon l'attributrequired.