La pseudo-classe :out-of-range
cible un élément <input>
lorsque la valeur de son attribut value
est en dehors de l'intervalle autorisé par les attributs min
et max
attributes. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.
/* Cible n'importe quel élément <input> qui possède un */
/* attribut range et que la valeur associée est en */
/* dehors de cet intervalle */
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
}
Note : Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.
Syntaxe
:out-of-range
Exemples
HTML
<form action="" id="form1">
<ul>Les valeurs entre 1 et 10 sont autorisées.
<li>
<input id="valeur1" 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: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
border: 2px solid red;
}
input:in-range + label::after {
content:' OK';
}
input:out-of-range + label::after {
content:'hors des limites !';
}
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
HTML Living Standard La définition de ':out-of-range' dans cette spécification. |
Standard évolutif | Définition de la correspondance entre :out-of-range et les éléments HTML. |
Selectors Level 4 La définition de ':out-of-range' dans cette spécification. |
Version de travail | Définition initiale. |
Compatibilité des navigateurs
BCD tables only load in the browser