:out-of-range
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2015.
La pseudo-classe :out-of-range cible un élément lorsque la valeur de son attribut value est en dehors de l'intervalle autorisé par les attributs min et max. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.
css
/* Cible n'importe quel élément 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
Error: could not find syntax for this item
Exemples
HTML
html
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: "hors des limites !";
}
Résultat
Spécifications
| Specification |
|---|
| HTML # selector-out-of-range |
| Selectors Level 4 # out-of-range-pseudo |