The :in-range pseudo-class matches a form control whose current value is inside the limits set by min and/or max.
Typical targets: type="number", range, date, and similar inputs with range limits. Pair it with :out-of-range for clear feedback.
Supported across modern browsers as part of HTML constraint validation styling.
Without min or max, the control matches neither :in-range nor :out-of-range.
:in-range { /* styles */ }Often combined with a type: input[type="number"]:in-range.
| Pattern | Description | Try it |
|---|---|---|
input:in-range | Any ranged input currently in bounds | Try it |
input[type="number"]:in-range | Number field within min/max | Try it |
input[type="range"]:in-range | Slider within its min/max | Try it |
with :out-of-range | Success vs outside-bounds styles | Try it |
| date input | Date value inside min/max window | Try it |
| no min/max | Neither range pseudo-class matches | Try it |
:in-rangeSet limits in HTML, then style the in-bounds state in CSS.
min and/or max on a supported input type.input:in-range { … } for values inside the limits.:out-of-range styles for values outside the limits.| Piece | Required? | Role |
|---|---|---|
| Supported input type | Yes | number, range, date, time, and similar |
min and/or max | Yes | Defines the allowed value window |
| Current value | Yes | Compared against those limits |
:out-of-range | Recommended | Styles values outside the window |
Change the number (min 1, max 10). The border turns green when :in-range matches and red when :out-of-range matches.
Each snippet focuses on :in-range. Use Try It Yourself for a live editor.
Highlight a number field when the value is in bounds.
input[type="number"]:in-range {
border-color: #16a34a;
background: #f0fdf4;
}min and max define the allowed window.:in-range.:out-of-range can take over instead.:out-of-rangeGive opposite cues for inside vs outside the limits.
input:in-range {
border-color: #16a34a;
}
input:out-of-range {
border-color: #dc2626;
}:in-range; 15 matches :out-of-range.A slider is almost always in range; the selector still applies.
input[type="range"]:in-range {
accent-color: #16a34a;
}type="range". The control has built-in min/max.:in-range. Styles such as accent-color can apply.Most surprises come from missing limits or empty values.
Without range attributes, neither :in-range nor :out-of-range applies.
An empty number field often matches neither range pseudo-class until a value is entered.
Plain text inputs do not participate. Use number, range, date, time, and related types.
:valid:valid covers all constraints. :in-range only reflects the min/max window.
Pair border colors with helper text or icons so status is clear without color vision.
:in-range is a browser CSS pseudo-class for ranged form controls. Node.js, Deno, and Bun do not evaluate it.
Chrome 10+, Firefox 29+, Safari 5.1+, Edge 13+, Opera 11+, IE 10+.
Bottom line: Safe for modern forms. Always set min/max for the selector to apply. Not a server runtime API.
min/max.min/max, it does not match.:out-of-range for values outside the window.One line: :in-range styles a ranged input when its value sits between min and max.
Style checkboxes and radios that are neither checked nor unchecked.
8 people found this page helpful