CSS :out-of-range Selector

What You’ll Learn

The :out-of-range pseudo-class styles form inputs whose value falls outside the allowed min and max range. It gives users instant visual feedback when they enter an unacceptable value.

Introduction

The CSS :out-of-range selector targets form elements whose current value falls outside the range defined by min and max attributes.

It is the counterpart to :in-range. When a user types a number below the minimum, above the maximum, or picks a date outside an allowed window, :out-of-range lets you highlight the problem immediately with red borders, backgrounds, or other error styling.

Definition and Usage

Use :out-of-range on its own or combined with an element selector: input:out-of-range or input[type="number"]:out-of-range. Styles apply while the current value violates the defined range constraints.

📝 Syntax

The syntax for the :out-of-range pseudo-class is:

:out-of-range {
  /* CSS properties */
}

The :out-of-range pseudo-class targets any form control whose current value violates the constraints set by min and max.

Basic Example

:in-range {
  border: 2px solid #16a34a;
  background-color: #dcfce7;
}

:out-of-range {
  border: 2px solid #dc2626;
  background-color: #fef2f2;
}

Supported Input Types

Syntax Rules

• min and/or max must be set on the input for range matching to work.
• An empty input is usually neither :in-range nor :out-of-range.
• Combine with type selectors for targeted styling: input[type="date"]:out-of-range.
• Pair with :in-range for complete valid/invalid feedback.
• Do not rely on CSS alone — always validate on the server too.

Related Selectors

• :in-range — matches values within min/max
• :invalid — matches inputs that fail any validation constraint
• :valid — matches inputs that pass all validation constraints
• :required — matches fields that must be filled in
• :focus — matches the currently focused input

When to Use :out-of-range

:out-of-range is ideal for highlighting values that violate range rules:

• Age or quantity fields — Show red when a number is too low or too high.
• Date pickers — Flag dates outside a booking or event window.
• Price or budget inputs — Warn when an entered amount exceeds limits.
• Time slots — Highlight appointments outside allowed hours.
• Progressive forms — Give instant error cues without writing JavaScript validation UI.

Examples Gallery

Practice :out-of-range with number inputs, error emphasis, date fields, and comparisons with :invalid.

<style>
  :in-range {
    border: 2px solid #16a34a;
    background: #dcfce7;
  }
  :out-of-range {
    border: 2px solid #dc2626;
    background: #fef2f2;
  }
  input {
    padding: 0.5rem;
    border-radius: 0.4rem;
    width: 100%;
  }
</style>

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

input[type="number"]:out-of-range {
  border-color: #dc2626;
  background: #fef2f2;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
  color: #b91c1c;
}

input[type="number"]:in-range {
  border-color: #16a34a;
  background: #f0fdf4;
}

input:out-of-range {
  border: 2px solid #dc2626;
  background: #fef2f2;
}

input:out-of-range:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.35);
}

input:in-range:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.25);
}

input[type="date"]:out-of-range {
  border: 2px solid #dc2626;
  color: #b91c1c;
  background: #fef2f2;
}

input[type="date"]:in-range {
  border: 2px solid #16a34a;
  color: #15803d;
}

💬 Usage Tips

• Pair with :in-range — Provide visual feedback for both valid and invalid range values.
• Set min and max — Without these attributes, :out-of-range has no effect.
• Real-time validation — Users see errors as they type, without waiting for form submit.
• Scope by type — Use input[type="number"]:out-of-range to avoid styling unrelated inputs.
• Combine with :focus — Intensify error styling while the user is still editing an invalid value.
• Server-side backup — CSS validation is a UX enhancement; always validate on the server.

⚠️ Common Pitfalls

• Missing min/max — The selector only works when range constraints are defined in HTML.
• Wrong input types — Text, email, and checkbox inputs do not support range-based pseudo-classes.
• Empty fields — An empty input may not match either :in-range or :out-of-range; use :required and :invalid too.
• CSS-only security — Never rely on styling alone to enforce business rules; validate server-side.
• Confusing with :invalid — :out-of-range only checks min/max, not pattern or required constraints.
• Color-only feedback — Add text hints or labels so users who cannot see red/green still understand the error.

♿ Accessibility

• Do not rely on color alone — Pair red borders with clear label text explaining the allowed range.
• Associate labels — Use <label for="..."> and include the range in the label: “Age (18–60)”.
• aria-invalid — For screen readers, consider adding aria-invalid="true" via JavaScript when out of range.
• Contrast — Ensure border and background colors meet WCAG contrast requirements.
• Error messages — Provide text explanations alongside visual cues for users who cannot perceive color changes.

💡 Best Practices