:out-of-range CSS Pseudo Class
Description
The :out-of-range pseudo-class applies to form fields where the value entered by the user is outside the specified range. The pseudo-class only works for those fields where the user can enter a value, even despite the restrictions imposed by the min and max attributes.
Syntax
element:out-of-range { ... }
Example
<p>Example of the :out-of-range pseudo class, try entering a number not between 1 and 10.</p>
<p>
<input type="number" min="1" max="10" value="1" id="inrange">
<label for="inrange"></label>
</p>input:in-range {
background: #fff;
padding: 5px;
border: 1px solid #333;
}
input:in-range + label::after {
content: "Choose a value between 1 and 10.";
}
input[type="number"]:out-of-range {
border: 1px solid red;
padding: 5px;
}
input:out-of-range + label::after {
content: "Error! This value is out of range! Pick another one.";
color: red;
}Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| X | 13 | 10 | 29 | 11 | 5.1 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 2.3 | 18 | 16 | 11 | 5 | 1.0 |