CSS :in-range Selector

What You’ll Learn

The :in-range pseudo-class styles form inputs whose value falls within the allowed min and max range. It gives users instant visual feedback during data entry.

Introduction

The CSS :in-range selector is used to select form elements whose values fall within a specified range defined by min and max attributes.

It typically applies to <input type="number"> and <input type="range">, allowing you to style inputs that are within the valid range and give users clear feedback about acceptable values.

Definition and Usage

Use :in-range on its own or combined with an element selector: input:in-range or input[type="number"]:in-range. Styles apply while the current value is between the defined minimum and maximum.

📝 Syntax

The syntax for the :in-range pseudo-class is:

:in-range {
  /* CSS properties */
}

The :in-range pseudo-class targets any form control whose current value is within 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 neither :in-range nor :out-of-range in most browsers.
• Combine with type selectors for targeted styling: input[type="range"]:in-range.
• Pair with :out-of-range for complete valid/invalid feedback.
• Do not rely on CSS alone — always validate on the server too.

Related Selectors

• :out-of-range — matches values outside min/max
• :valid — matches inputs that pass all validation constraints
• :invalid — matches inputs that fail validation
• :disabled — matches inactive form controls
• :focus — matches the currently focused input

When to Use :in-range

:in-range is ideal for real-time form range feedback:

• Age or quantity fields — Show green when a number falls within allowed limits.
• Range sliders — Highlight sliders when the selected value is acceptable.
• Date pickers — Style dates within a booking window.
• Price filters — Indicate when a entered price is within min/max bounds.
• Progressive forms — Give instant cues without writing JavaScript validation UI.

Examples Gallery

Practice :in-range with number inputs, range sliders, date fields, and paired out-of-range styling.

<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="25">

  <label for="quantity">Quantity (1–100):</label>
  <input type="range" id="quantity" min="1" max="100" value="50">
</form>

input[type="number"]:in-range {
  border-color: #16a34a;
  background: #f0fdf4;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

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

input[type="range"]:in-range {
  accent-color: #16a34a;
}

input[type="range"]:out-of-range {
  accent-color: #dc2626;
}

input[type="range"] {
  width: 100%;
  margin: 0.5rem 0;
}

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

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

💬 Usage Tips

• Pair with :out-of-range — Provide visual feedback for both valid and invalid range values.
• Set min and max — Without these attributes, :in-range has no effect.
• Real-time validation — Users see feedback as they type or drag, without waiting for form submit.
• Scope by type — Use input[type="number"]:in-range to avoid styling unrelated inputs.
• 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 :valid — :in-range only checks min/max, not pattern or required constraints.

♿ Accessibility

• Do not rely on color alone — Pair green/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