CSS :in-range Pseudo Class

CSS :in-range Pseudo-Class

The :in-range pseudo-class applies styles to input fields whose values fall within a specified min and max range. It is commonly used with <input type="number">, <input type="range">, or <input type="date">.

1. Syntax

input:in-range {
  /* CSS styles here */
}

✅ This targets any <input> field whose value is within the valid range.

2. Example – Styling a Number Input in Range

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

input:in-range {
  border: 2px solid green;
  background-color: #eaffea;
}

input:out-of-range {
  border: 2px solid red;
  background-color: #ffeaea;
}

✅ If the user enters a number between 18 and 60, the border turns green.
❌ If they enter outside this range, the border turns red (:out-of-range).

3. Example – Styling a Range Slider in Range

<label for="volume">Set Volume (0-100):</label>
<input type="range" id="volume" min="0" max="100" value="50">

input:in-range {
  outline: 3px solid blue;
}

✅ When the slider is within the valid range, it gets a blue outline.

4. Example – Styling a Date Input in Range

<label for="dob">Select a Date (2000-01-01 to 2025-12-31):</label>
<input type="date" id="dob" min="2000-01-01" max="2025-12-31">

input:in-range {
  color: green;
}

✅ If the user selects a valid date, the text color turns green.

5. :in-range vs :out-of-range

Pseudo-Class	Applies When
:in-range	Value is within min and max.
:out-of-range	Value is outside min and max.

6. Browser Support

✅ Supported in Chrome, Edge, Firefox, Safari, and Opera.
⚠ Works only on inputs with min and max attributes.

7. Best Practices

✔ Use :in-range to give visual feedback when inputs are valid.
✔ Combine it with :out-of-range for error handling.
✔ Always validate input values with JavaScript for better accessibility.