CSS :in-range Selector
Example
Select and style only if the value of the <input> element is "in range":
input:in-range
{
border: 2px solid yellow;
}
Try it Yourself »
Definition and Usage
The :in-range selector selects all elements with a value that is within a specified range.
Note: The :in-range selector only works for input elements with min and/or max attributes!
Tip: Use the :out-of-range selector to select all elements with a value that is outside a specified range.
| Version: | CSS3 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the selector.
| Selector | |||||
|---|---|---|---|---|---|
| :in-range | 53.0 | 13.0* | 50.0 | 10.1 | 40.0 |
*In Edge, the :in-range property also incorrectly selects input elements without min/max attributes.
CSS Syntax
Related Pages
CSS Selector :out-of-range
