CSS :out-of-range Pseudo Class

CSS :out-of-range Pseudo-Class

The :out-of-range pseudo-class applies styles to form inputs when their values fall outside a specified range. It works with <input> fields that have min and max attributes.

1. Syntax

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

✅ This highlights invalid (out-of-range) inputs with a red border and light red background.

2. Example – Applying :out-of-range

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

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

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

✅ If a user enters a number below 18 or above 60, the input turns red.
✅ If the number is within range (18-60), the input turns green.

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

Pseudo-Class	Targets
:out-of-range	Input values that exceed min/max constraints
:in-range	Input values within the allowed range

✅ Combine both for better user feedback.

4. Advanced Example – Highlighting Out-of-Range Inputs

<form>
  <label for="temperature">Temperature (-30 to 50°C):</label>
  <input type="number" id="temperature" min="-30" max="50" placeholder="Enter a value">
</form>

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

input:in-range {
  border: 2px solid blue;
  background-color: #e6f7ff;
}

✅ This provides color feedback based on input validity.

5. Browser Support

✅ Supported in Chrome, Firefox, Edge, Safari
❌ Not supported in Internet Explorer

6. Best Practices

✔ Use :out-of-range to visually indicate invalid inputs.
✔ Combine with :in-range for clearer user guidance.
✔ Ensure min and max values are set for proper validation.