CSS :in-range Pseudo-Class

CSS :in-range Pseudo-Class

The CSS :in-range pseudo-class selects form controls whose current values fall within their permitted minimum and maximum limits. It is commonly used with number, date, and time inputs to provide visual feedback when a value is within the allowed range.

:in-range Syntax

selector:in-range {
  property: value;
}

The :in-range pseudo-class is added to a selector without a space. It matches range-limited form controls when their values satisfy the applicable minimum and maximum constraints.

Basic Example

input:in-range {
  border: 2px solid #008000;
}

This rule adds a green border to matching input elements whose values are within their permitted range.

Targeting Number Inputs

input[type="number"]:in-range {
  background-color: #e8f5e9;
}

This rule applies a light green background to number inputs with values within their allowed limits.

Combining with a Class

.quantity:in-range {
  border-color: #008000;
}

This selector targets an element with the quantity class when its value is within range.

How :in-range Works

HTML form controls can define minimum and maximum permitted values using the min and max attributes.

The browser compares the control's current value against these constraints and updates its range-related pseudo-class states.

HTML Example

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

The current value is 5, which falls between the minimum of 1 and maximum of 10.

CSS Example

input:in-range {
  border-color: #008000;
}
input:out-of-range {
  border-color: #cc3333;
}

The input matches :in-range while its value remains within the allowed limits. If the user enters 11, the input matches :out-of-range instead.

Automatic State Updates

The browser updates these states as the user changes the value. JavaScript is not required for the CSS styling to respond.

Inclusive Boundaries

The minimum and maximum values are included in the permitted range. For an input with min="1" and max="10", both 1 and 10 are within range.

Supported Input Types

The :in-range pseudo-class applies to input types that support range constraints. Some types use numeric limits, while others use dates or times.

Common Input Types

Number Input

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

Date Input

<input type="date" min="2026-01-01" max="2026-12-31">

Time Input

<input type="time" min="09:00" max="17:00">

Not all input types support range constraints. Text, email, and password inputs do not use min and max to define numeric or date ranges.

Using min and max

The min and max attributes define the permitted boundaries for supported input types.

Minimum Value

<input type="number" min="5" value="7">

The value must be at least 5. A value of 7 is within range.

Maximum Value

<input type="number" max="50" value="25">

The value must not exceed 50. A value of 25 is within range.

Minimum and Maximum Together

<input type="number" min="10" max="100" value="50">

The permitted range is 10 through 100, inclusive.

Only One Boundary Is Required

A control can have only a minimum or only a maximum. It does not need both attributes to participate in range validation.

The step Attribute

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

The value 3 is within the minimum and maximum limits but does not satisfy the step constraint. Therefore, the input can match :in-range and :invalid at the same time.

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

The :in-range and :out-of-range pseudo-classes represent opposite range states for controls that support range constraints.

Comparison

CSS Example

input:in-range {
  border: 2px solid #008000;
}
input:out-of-range {
  border: 2px solid #cc3333;
}

HTML Example

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

Entering a value between 1 and 10 matches :in-range. Entering 0 or 11 matches :out-of-range.

Empty Inputs

An empty value does not cause a range overflow or underflow. An empty range-capable control can still match :in-range, even if it is also invalid because it is required.

:in-range vs. :valid

The :in-range pseudo-class checks range constraints, while :valid considers all applicable HTML constraint validation rules.

Comparison

Example with step

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

The value 3 is within the permitted range but does not match the step interval. The input matches :in-range and :invalid.

Combining Pseudo-Classes

input:in-range:valid {
  border-color: #008000;
}
input:invalid {
  border-color: #cc3333;
}

Use :in-range:valid when a positive visual state should require both range compliance and overall validity.

Empty Values

Empty values require special consideration when styling form validation states.

Optional Number Input

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

An empty optional number input does not violate the range limits.

Required Number Input

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

An empty required input is invalid because a value is missing, not because the value is outside the permitted range.

Styling Nonempty Values

input:in-range:not(:placeholder-shown) {
  border-color: #008000;
}

For supported inputs displaying a placeholder, :placeholder-shown can help distinguish an empty field. It is not a universal way to detect whether every type of input is empty.

Avoid Misleading Feedback

Do not assume that every element matching :in-range contains a completed, valid value. Use additional validation states when necessary.

:in-range Specificity

The :in-range pseudo-class contributes a specificity of 0-1-0.

Specificity Examples

Specificity Example

input {
  border-color: #ccc;
}
input:in-range {
  border-color: #008000;
}

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

Practical Uses

The :in-range pseudo-class provides immediate visual feedback for range-limited form fields.

Quantity Fields

input.quantity:in-range {
  border-color: #008000;
}

Use this rule for quantity inputs with defined minimum and maximum limits.

Age Ranges

<input type="number" min="18" max="100">

input:in-range {
  background-color: #e8f5e9;
}

The background changes when the entered value is within the allowed range.

Date Limits

<input type="date" min="2026-01-01" max="2026-12-31">

input[type="date"]:in-range {
  border-color: #008000;
}

The border indicates that the selected date is within the permitted boundaries.

Visual Feedback

Combine :in-range and :out-of-range to distinguish values within and outside the permitted range.

Limitations

The :in-range pseudo-class checks range constraints but does not replace complete form validation.

Requires Range-Capable Controls

Inputs that do not support minimum and maximum range constraints do not become range-limited simply because they use :in-range in CSS.

Does Not Check Every Validation Rule

An input can be within range but invalid because of a step mismatch or another constraint.

Empty Values

An empty value does not violate minimum or maximum boundaries. Use :required, :invalid, or other appropriate validation methods when necessary.

Range Inputs

For type="range", browsers generally constrain the slider to its permitted limits, so users cannot ordinarily move it outside the range.

Not a Security Check

CSS does not enforce data integrity. Validate submitted values on the server, even when HTML constraint validation is used.

Accessibility

Range feedback should be understandable to users regardless of how they interact with the form.

Provide Visible Labels

Associate each form control with a descriptive <label> element.

Explain Permitted Values

Display the minimum and maximum limits in nearby text so users know the expected range before entering a value.

Do Not Rely on Color Alone

Green and red borders can provide visual feedback, but important validation information should also be available through text or other accessible indicators.

Maintain Focus Visibility

Do not remove keyboard focus indicators when applying range-related styles.

Accessible Error Messages

When a value is outside the permitted range, provide a clear explanation of the allowed values rather than relying only on a border color.

Best Practices

• Use :in-range with input types that support minimum and maximum constraints.
• Define meaningful limits using the min and max attributes.
• Use :out-of-range to style values outside the permitted range.
• Use :valid or :invalid when overall validation status matters.
• Remember that an empty value does not automatically violate range limits.
• Provide visible labels and explain the permitted range.
• Do not rely on color alone to communicate validation results.
• Validate submitted data on the server.

:in-range Example

This example uses a number input with a permitted range of 1 through 10. Enter a value within the range to display a green border, or enter a value outside the range to display a red border.

HTML

<div class="range-demo">
  <label for="quantity">Quantity (1 to 10):</label>
  <input type="number" id="quantity" min="1" max="10" value="5" required>
  <p>Try entering 0, 5, or 11.</p>
</div>

CSS

.range-demo label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}
.range-demo input {
  width: 120px;
  padding: 8px;
  border: 2px solid #ccc;
  border-radius: 4px;
}
.range-demo input:in-range {
  border-color: #008000;
  background-color: #e8f5e9;
}
.range-demo input:out-of-range {
  border-color: #cc3333;
  background-color: #fdeaea;
}
.range-demo input:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Browser Result

Play in Editor

Note: The border and background change automatically as the input value moves inside or outside the permitted range. An empty required field may still match :in-range even though it is invalid.

Browser Support

Baseline: Widely available. The :in-range pseudo-class is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

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

Specifications

The :in-range pseudo-class is defined in CSS Selectors Level 4 as a range pseudo-class. Its behavior is based on the range constraints defined by the document language.

Selectors Level 4 - Range Pseudo-Classes