:in-range
La pseudo-classe :in-range
cible un élément <input>
lorsque sa valeur courante est comprise dans l'intervalle défini par les attributs min
et max.
css
/* Cible n'importe quel élément <input> */
/* qui possède un intervalle et pour le- */
/* quel la valeur est dans cet intervalle */
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
Cette pseudo-classe s'avère utile lorsqu'on souhaite fournir une indication visuelle quand la valeur est en dehors de la fourchette autorisée.
Note : Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme dans l'intervalle ou en dehors de l'intervalle.
Syntaxe
Error: could not find syntax for this item
Exemples
CSS
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: " non autorisée !";
}
HTML
html
<form action="" id="form1">
<ul>
Les valeurs entre 1 et 10 sont valides.
<li>
<input
id="valeur1"
name="valeur1"
type="number"
placeholder="de 1 à 10"
min="1"
max="10"
value="12" />
<label for="valeur1">Votre valeur est </label>
</li>
</ul>
</form>
Résultat
Spécifications
Specification |
---|
HTML Standard # selector-in-range |
Selectors Level 4 # in-range-pseudo |
Compatibilité des navigateurs
BCD tables only load in the browser