:out-of-range CSS Pseudo Class
Description
The CSS :out-of-range
pseudo class matches input elements with a value that is outside the range specified by the min
and max
attributes. It can be used to style input elements in a different way when their value is out of range, such as by adding a red border or displaying an error message.
The :out-of-range
pseudo class only works on input elements that have a numeric or temporal type, such as number
, date
, and time
. It does not work on input elements with a text type, such as text
and email
.
Here is an example of how to use the :out-of-range
pseudo class:
<input type="number" min="10" max="20" id="age">
#age:out-of-range {
border: 1px solid red;
}
This CSS will add a red border to the input element with the ID
age
if its value is outside the range of 10 to 20.The
:out-of-range
pseudo class can be used to improve the user experience of your forms by giving users a visual indication that their input is out of range. This can help users to correct their input and submit valid forms.
Syntax
: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
The following table will show you the current browser support for the CSS :out-of-range
pseudo class.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
13 | 10 | 29 | 11 | 5.1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 16 | 11 | 5 | 1 | 2.2 |
Last updated by CSSPortal on: 1st October 2023