:in-range CSS Pseudo Class

Description

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.

Syntax

element:in-range { … }

Example

HTML

<p>Example of the :in-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>

CSS

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;

}