:in-range CSS Pseudo Class


The in-range pseudo-class applies to form elements in which the value entered by the user is in a predetermined range. The range itself is set using the min and max attributes; they respectively set the minimum and maximum values.


element:in-range { … }


<p>Example of the :in-range pseudo class, try entering a number not between 1 and 10.</p>
<input type="number" min="1" max="10" value="1" id="inrange">
<label for="inrange"></label>
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

Explorer Edge Chrome Firefox Opera Safari
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung