CSS :out-of-range Pseudo-Class

CSS :out-of-range Pseudo-Class

The CSS :out-of-range pseudo-class selects form controls whose current values fall outside the limits defined by their min and max attributes. It is useful for identifying numbers, dates, and other range-limited values that are too low or too high.

:out-of-range Syntax

selector:out-of-range {
  property: value;
}

The :out-of-range pseudo-class matches a form control that supports range constraints and has a value below its minimum or above its maximum.

Basic Example

input:out-of-range {
  border-color: #c0392b;
}

Applies a red border to an input when its value is outside an allowed range.

Number Input

input[type="number"]:out-of-range {
  background-color: #fdecea;
}

Highlights a number input when its value is below the minimum or above the maximum.

Date Input

input[type="date"]:out-of-range {
  border: 2px solid #c0392b;
}

Highlights a date input when its selected date falls outside the permitted dates.

No Parentheses

The :out-of-range pseudo-class does not accept arguments and is written without parentheses.

How :out-of-range Works

The browser compares a control's current value against applicable minimum and maximum constraints. If the value is outside those limits, the control matches :out-of-range.

HTML Example

<label for="quantity">Quantity (1 to 10):</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" value="15">

CSS Example

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

The input matches because its value of 15 exceeds the maximum of 10.

Below the Minimum

A number input with min="1" and a value of 0 matches :out-of-range.

Above the Maximum

A number input with max="10" and a value of 11 matches :out-of-range.

Within the Limits

Values from 1 through 10, including both endpoints, do not match :out-of-range.

Automatic Updates

The browser updates matching when the user changes the value or when applicable range constraints change.

Minimum and Maximum Values

The HTML min and max attributes define lower and upper limits for supported input types.

Minimum Only

<input type="number" min="18" value="16">

The value 16 is below the minimum of 18, so the input matches :out-of-range.

Maximum Only

<input type="number" max="100" value="125">

The value 125 exceeds the maximum of 100, so the input matches.

Minimum and Maximum

<input type="number" min="1" max="10" value="5">

The value 5 is within the allowed range, so the input does not match :out-of-range.

Range Comparison

Inclusive Boundaries

The minimum and maximum values are inclusive. A value equal to either valid boundary is not out of range.

Number Inputs

Number inputs are a common use for :out-of-range because they support numeric minimum and maximum constraints.

HTML Example

<label for="rating">Rating (1 to 5):</label>
<input type="number" id="rating" name="rating" min="1" max="5" value="7">

CSS Example

input[type="number"]:out-of-range {
  border-color: #c0392b;
  background-color: #fdecea;
}

The rating field matches because 7 is greater than the maximum allowed value of 5.

Decimal Values

<input type="number" min="0" max="1" step="0.1" value="1.5">

The value 1.5 is above the maximum of 1, so the control matches :out-of-range.

Negative Values

<input type="number" min="-10" max="10" value="-15">

The value -15 is below the minimum of -10 and matches :out-of-range.

Range Slider Difference

An <input type="range"> normally keeps its value within its configured limits. It generally cannot remain in an out-of-range state through ordinary user interaction, even though it uses min and max.

Date and Time Inputs

Supported date and time input types can use minimum and maximum values to restrict selections.

Date Input

<label for="event-date">Event Date:</label>
<input type="date" id="event-date" min="2026-01-01" max="2026-12-31" value="2027-01-15">

The selected date is later than the maximum date, so the control matches :out-of-range.

Time Input

<label for="appointment">Appointment Time:</label>
<input type="time" id="appointment" min="09:00" max="17:00" value="18:30">

The selected time is later than the maximum allowed time and matches :out-of-range.

Month Input

<input type="month" min="2026-01" max="2026-12" value="2027-02">

The selected month is outside the allowed range.

Datetime-Local Input

<input type="datetime-local" min="2026-01-01T09:00" max="2026-12-31T17:00" value="2027-01-01T10:00">

The selected local date and time exceed the maximum allowed value.

Browser Interface Differences

Some date and time pickers prevent users from choosing unavailable values, while others allow typed input. Test the behavior of supported browsers.

Empty and Invalid Values

The :out-of-range pseudo-class specifically identifies range violations. It does not match every invalid form value.

Empty Optional Input

<input type="number" min="1" max="10">

An empty optional number input does not match :out-of-range because it has no numeric value to compare against the limits.

Empty Required Input

<input type="number" min="1" max="10" required>

If this input is empty, it matches :invalid because a required value is missing, but it does not match :out-of-range.

Invalid Number Entry

A number input containing an entry the browser cannot convert to a valid number may be invalid without matching :out-of-range.

Pattern Mismatch

<input type="text" pattern="[A-Z]{3}" value="abc">

This text input can match :invalid because its value does not satisfy the pattern, but it does not match :out-of-range.

Range Validation vs. General Validation

Use :out-of-range for minimum and maximum violations. Use :invalid for a broader range of validation failures.

Step Validation

The step attribute controls permitted value increments for supported input types. A step mismatch is different from a minimum or maximum violation.

HTML Example

<input type="number" min="0" max="10" step="2" value="3">

The value 3 is between 0 and 10, but it does not follow the required increments of 2.

CSS Example

input:invalid {
  border-color: #c0392b;
}
input:out-of-range {
  background-color: #fdecea;
}

The input matches :invalid because of the step mismatch, but it does not match :out-of-range because 3 is within the minimum and maximum limits.

Step and Range Violations Together

<input type="number" min="0" max="10" step="2" value="11">

The value 11 exceeds the maximum and also violates the step increment. The input matches both :out-of-range and :invalid.

Choosing the Right Selector

Use :out-of-range when the value is outside its boundaries. Use :invalid when any constraint validation failure needs styling.

Related Pseudo-Classes

Several form-state pseudo-classes describe range limits, validity, and user interaction.

Comparison

In Range vs. Out of Range

input:in-range {
  border-color: #2e7d32;
}
input:out-of-range {
  border-color: #c0392b;
}

These selectors distinguish controls that satisfy or violate their range limits.

Out of Range vs. Invalid

input:out-of-range {
  background-color: #fdecea;
}
input:invalid {
  border-color: #c0392b;
}

An out-of-range value is invalid, but an invalid value is not necessarily out of range.

Dynamic Values and Constraints

The :out-of-range pseudo-class updates automatically when a supported control's value or range constraints change.

Initial HTML

<input type="number" id="quantity" min="1" max="10" value="5">

CSS

#quantity:out-of-range {
  border-color: #c0392b;
}

The initial value of 5 is within the allowed range.

Changing the Value

const quantity = document.getElementById("quantity");
quantity.value = "15";

The input now matches :out-of-range because its value exceeds the maximum.

Changing the Maximum

quantity.max = "20";

The value of 15 is now within the updated range, so the input stops matching :out-of-range.

No Manual Class Updates

The browser recalculates pseudo-class matching automatically. JavaScript does not need to add or remove a separate error class.

:out-of-range Specificity

The :out-of-range pseudo-class contributes a specificity of 0-1-0, like other standard pseudo-classes.

Specificity Examples

Specificity Example

input {
  border-color: #ccc;
}
input:out-of-range {
  border-color: #c0392b;
}

When both rules match and other cascade factors are equal, the :out-of-range rule takes precedence because it has greater specificity.

Combined Pseudo-Classes

input:required:out-of-range {
  background-color: #fdecea;
}

This selector matches required inputs whose values are outside their permitted range.

Practical Uses

The :out-of-range pseudo-class can provide immediate visual feedback for values outside defined boundaries.

Quantity Limits

input[name="quantity"]:out-of-range {
  border-color: #c0392b;
}

Highlights a quantity that is below the minimum or above the maximum.

Rating Limits

input[name="rating"]:out-of-range {
  background-color: #fdecea;
}

Identifies ratings outside the permitted numeric range.

Date Restrictions

input[type="date"]:out-of-range {
  border: 2px solid #c0392b;
}

Highlights dates outside the allowed period.

Error Message

<div class="form-field">
  <label for="age">Age (18 to 100):</label>
  <input type="number" id="age" min="18" max="100">
  <span class="range-error">Enter a value from 18 to 100.</span>
</div>

.range-error {
  display: none;
}
input:out-of-range + .range-error {
  display: block;
  color: #c0392b;
}

Displays an explanatory message when the value is outside the allowed range.

Combining Visual Indicators

input:out-of-range {
  border-color: #c0392b;
  background-color: #fdecea;
}

Using both a border and background change makes the state more noticeable than changing only one property.

Limitations

The :out-of-range pseudo-class identifies only violations of supported minimum and maximum constraints.

Not a General Validation Selector

It does not match every invalid form value. Use :invalid for broader constraint validation errors.

Unsupported Input Types

Text, email, password, and other input types without applicable numeric or date range constraints do not match :out-of-range.

Empty Values

An empty control does not become out of range simply because it has a minimum or maximum. A missing required value is handled separately by constraint validation.

Step Mismatches

A value that violates the step attribute but remains within the minimum and maximum limits does not match :out-of-range.

Range Sliders

Range sliders normally constrain their values to the permitted interval, so they generally do not enter an out-of-range state.

Browser Input Interfaces

Some native controls restrict invalid selections directly, while others allow users to enter values outside the limits.

CSS Does Not Enforce Limits

The pseudo-class styles a range violation but does not define the limits or replace form validation. Use HTML constraints and server-side validation as appropriate.

Best Practices

• Use :out-of-range for supported controls with minimum or maximum constraints.
• Define the permitted range using the HTML min and max attributes.
• Display the allowed limits in the field label or nearby instructions.
• Use :invalid for validation errors unrelated to minimum and maximum limits.
• Remember that step mismatches are not necessarily range violations.
• Provide clear error messages rather than relying on border colors alone.
• Use :user-invalid when validation feedback should depend on user interaction.
• Test minimum, maximum, empty, and out-of-range values.
• Consider browser differences in number, date, and time input interfaces.
• Validate submitted data on the server when appropriate.

:out-of-range Example

This example uses a number input that accepts values from 1 through 10. The field starts with an out-of-range value of 15, so it receives a red border and light red background. Enter a value within the allowed range to remove the warning styling.

HTML

<div class="out-of-range-demo">
  <label for="demo-quantity">Quantity (1 to 10)</label>
  <input type="number" id="demo-quantity" min="1" max="10" value="15">
  <p class="range-error">Enter a value from 1 to 10.</p>
</div>

CSS

.out-of-range-demo label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}
.out-of-range-demo input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 2px solid #ccc;
  background-color: #f5f5f5;
}
.out-of-range-demo input:out-of-range {
  border-color: #c0392b;
  background-color: #fdecea;
}
.out-of-range-demo .range-error {
  display: none;
  margin-top: 8px;
  color: #c0392b;
}
.out-of-range-demo input:out-of-range + .range-error {
  display: block;
}

Browser Result

Play in Editor

Note: The initial value of 15 is outside the allowed range, so the input and warning message show the error state. Change the value to a number from 1 through 10 to see the styling update automatically.

Browser Support

Baseline: Widely available. The :out-of-range pseudo-class is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers. It works with form controls that support applicable range constraints.

For current compatibility information, visit Can I Use? and search for :out-of-range.

Specifications

The :out-of-range pseudo-class is defined in CSS Selectors Level 4 as a form-state pseudo-class. It matches elements whose values fall outside applicable minimum or maximum constraints.

Selectors Level 4 - Range Pseudo-Classes