Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
:out-of-range
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis novembre 2015.
Lapseudo-classeCSS:out-of-range cible un élément<input> lorsque la valeur de son attributvalue est en dehors de l'intervalle autorisé par les attributsmin etmax. Ceci permet d'informer l'utilisateur·ice que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.
Exemple interactif
label { display: block; margin-top: 1em;}input:out-of-range { background-color: orangered;}<form> <label for="amount" >Combien de billets ? (Vous pouvez acheter 2 à 6 billets)</label > <input name="amount" type="number" min="2" max="6" value="4" /> <label for="dep" >Date de départ : (Toute l'année 2022 est acceptée)</label > <input name="dep" type="date" min="2022-01-01" max="2022-12-31" value="2025-05-05" /> <label for="ret" >Date de retour : (Toute l'année 2022 est acceptée)</label > <input name="ret" type="date" min="2022-01-01" max="2022-12-31" /></form>La pseudo-classe:out-of-range est utile pour donner à l'utilisateur·ice une indication visuelle qu'une valeur de champ est en dehors des limites autorisées.
Note :Cette pseudo-classe s'applique seulement aux éléments qui ont (et peuvent avoir) une limitation de plage. En l'absence d'une telle limitation, l'élément ne peut être ni "dans la plage" ni "hors de la plage".
Syntaxe
:out-of-range { /* ... */}Exemples
HTML
<form action=""> <ul> Les valeurs entre 1 et 10 sont autorisées. <li> <input name="valeur1" type="number" placeholder="1 à 10" min="1" max="10" value="12" /> <label for="valeur1">Votre valeur est </label> </li> </ul></form>CSS
li { list-style: none; margin-bottom: 1em;}input { border: 1px solid black;}input:in-range { background-color: rgb(0 255 0 / 25%);}input:out-of-range { background-color: rgb(255 0 0 / 25%); border: 2px solid red;}input:in-range + label::after { content: "valide.";}input:out-of-range + label::after { content: "hors de portée !";}Résultat
Spécifications
| Specification |
|---|
| HTML # selector-out-of-range |
| Selectors Level 4 # out-of-range-pseudo |
Compatibilité des navigateurs
Voir aussi
- La pseudo-classe
:in-range - Le guide de validation des données de formulaire