:in-range
Summary
The :in-range pseudo selector selects input elements when their value is within a specified range.
The :in-range CSS pseudo-class matches when an element has its value attribute inside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is inside the range limits.
Examples
<code>
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:'out of range!';
}
</code>
Related specifications
- Selectors Level 4
- W3C Editor’s Draft
See also
Related articles
Pseudo-Classes
:in-range
Selectors
:in-range