:in-range CSS Pseudo Class

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS in-range pseudo class selects all input elements with a value that is within a specified range. It is useful for giving the user a visual indication that a field's current value is within the permitted limits.

The in-range pseudo class only works for input elements with min and/or max attributes. If an input element does not have these attributes, then it cannot be "in-range" or "out-of-range."

Here is an example of how to use the :in-range pseudo class:

<input type="number" min="10" max="100" value="50">

input:in-range {

  border-color: green;

}



input:out-of-range {

  border-color: red;

}

In this example, the input element will have a green border if the value is within the range of 10 to 100, and a red border if the value is outside of that range.

The :in-range pseudo class can be combined with other pseudo classes, such as :hover and :focus, to create more complex effects. For example, you could use the following CSS to give the input element a yellow border when the user hovers over it, and a green border when the user is typing into it:

input:hover {

  border-color: yellow;

}



input:focus:in-range {

  border-color: green;

}

The :in-range pseudo class is a useful tool for making your forms more user-friendly and informative.

Syntax

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

}