:in-range CSS Pseudo Class

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

<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>
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 :in-range pseudo class.

Desktop
Edge Chrome Firefox Opera Safari
131029115.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
181611512.2

Last updated by CSSPortal on: 1st October 2023