:in-range CSS Pseudo Class

The :in-range CSS pseudo-class is used to target form elements, particularly input elements, whose current value falls within a specified range defined by the element's attributes. Most commonly, this pseudo-class is applied to input elements of type number, range, date, time, or any other type that supports min and max attributes. When the value entered by the user is equal to or greater than the min attribute and equal to or less than the max attribute, the element is considered “in range,” and the styles defined by :in-range will be applied.

This pseudo-class is particularly useful in providing immediate visual feedback to users. For instance, a number input that expects values between 1 and 10 can be styled differently when the user enters a valid value versus an invalid one. It is often paired with :out-of-range to distinguish valid input from invalid input, allowing developers to create intuitive forms without relying solely on JavaScript validation.

In addition to styling, :in-range can be combined with other pseudo-classes such as :focus to highlight elements only when they are both valid and actively selected. It respects the underlying HTML attributes like min, max, and step, which define the valid value ranges.

Example:

<label for="age">Enter your age (18-99):</label>
<input type="number" id="age" name="age" min="18" max="99">

<style>
  input:in-range {
    border: 2px solid green;
    background-color: #e0ffe0;
  }

  input:out-of-range {
    border: 2px solid red;
    background-color: #ffe0e0;
  }
</style>

In this example, when a user enters a value between 18 and 99, the input field will display a green border and a light green background. Values outside this range will show a red border and a pink background, giving instant visual feedback.

The :in-range pseudo-class is a lightweight, declarative way to enforce input constraints visually and improve form usability without additional scripting.