CSS :in-range Pseudo Class
The :in-range CSS pseudo-class selects elements with a value within the range limits specified by the min and max attributes. Practice with examples.
The :in-range CSS pseudo-class matches an <input> element whose current value is inside the range defined by its min and max attributes. It lets you style a field differently while the user's entry is still valid, giving instant visual feedback without a single line of JavaScript.
This page covers when :in-range applies, the input types it works with, practical styling examples, and how it relates to the validation pseudo-classes it pairs with.
When the selector applies
:in-range only matters for form controls that can express a range. A control is range-limited when it accepts a min and/or max constraint. If a control has no such constraint, it can be neither "in range" nor out of range — so neither pseudo-class will ever match it.
:in-range works on <input> elements that support min/max: type="number", type="range", type="date", type="month", type="week", type="time", and type="datetime-local". A text input, checkbox, or button is never in range.
A field is in range when all three are true:
- the input type supports
min/max, - at least one of
minormaxis set, - the current value is between the limits (inclusive).
The moment the value crosses a limit it stops matching :in-range and starts matching :out-of-range instead. The two pseudo-classes are mutually exclusive, so they pair perfectly for "good vs. bad" styling.
Syntax
:in-range {
/* style declarations */
}In practice you almost always qualify it with input (or a more specific selector) so it only targets the controls you mean:
input:in-range {
border-color: green;
}Styling an in-range input
The example below outlines a number field while its value stays within 1–10. Try changing the value to 0 or 15 in the editor: the border style disappears because the field is no longer in range.
<!DOCTYPE html>
<html>
<head>
<title>:in-range example</title>
<style>
input:in-range {
border: 2px solid #666;
}
</style>
</head>
<body>
<h2>:in-range selector example</h2>
<form>
<input type="number" min="1" max="10" value="5" />
</form>
</body>
</html>Pairing in-range with out-of-range
Because the two states never overlap, a common pattern is to style both at once: green while valid, red the instant the value leaves the allowed band.
<!DOCTYPE html>
<html>
<head>
<title>:in-range and :out-of-range</title>
<style>
input:in-range {
border: 2px solid green;
}
input:out-of-range {
border: 2px solid red;
}
</style>
</head>
<body>
<label>Quantity (1–10):</label>
<input type="number" min="1" max="10" value="5" />
</body>
</html>Combining with other pseudo-classes
:in-range can be chained with other pseudo-classes — for example :hover or :focus — to refine the feedback further:
input:in-range:focus {
outline: 2px solid green;
}Notes and gotchas
:in-rangereflects the current value, so the style updates live as the user types or drags a slider.- An empty field with a
min/maxis considered in range (there is no value to violate the limit), so combine it with:requiredif an empty value should be treated as invalid. minandmaxonly constrain styling here — they are still enforced by native validation pseudo-classes like:validand:invalidwhen the form is submitted.