: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

HTML

<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>

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;

}