CSS :out-of-range Pseudo Class
The :out-of-range CSS pseudo-class selects elements with a value outside the range limits specified by the min and max attributes. Practice with examples.
The :out-of-range CSS pseudo-class matches a form input whose current value is outside the allowed range defined by its min and/or max attributes. It lets you give the user instant visual feedback — a red border, a warning color, a hint message — the moment they type a number that is too low or too high, without any JavaScript.
This page explains exactly which elements :out-of-range applies to, how it differs from :in-range and :invalid, and shows runnable examples you can copy.
:out-of-range only matches <input> elements that have a min and/or max attribute and support range constraints — that is, type="number", type="range", and the date/time types (date, month, week, time, datetime-local). On any other input it never matches.
When the pseudo-class matches
An input is "out of range" when all of the following are true:
- It has a
minand/ormaxattribute. - It currently holds a value the browser can parse.
- That value is less than
minor greater thanmax.
A few consequences worth remembering:
- Empty inputs never match. With no value there is nothing to compare, so
:out-of-rangeisfalse(and:in-rangeis alsofalse). - It is purely about the numeric/date range. A
stepmismatch (for example1.5whenstep="1") makes the input:invalid, but it does not make it:out-of-range. - The pseudo-class updates live as the user edits the field, so styles toggle in real time.
Version
Syntax
:out-of-range {
/* css declarations */
}You will almost always pair it with the input type for clarity:
input:out-of-range {
border: 3px solid #d9534f;
}Example of the :out-of-range selector
The input below accepts months 1–12, but starts at 15, so the border is highlighted on load. Change the value to something between 1 and 12 and the highlight disappears.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:out-of-range {
border: 3px solid #8ebf42;
}
</style>
</head>
<body>
<h2>:out-of-range selector example</h2>
<form>
<input type="number" min="1" max="12" value="15" />
</form>
</body>
</html>Pairing :out-of-range with :in-range
:out-of-range and :in-range are opposites: at most one of them matches at a time, and neither matches an empty input. Styling both gives a complete "valid value / invalid value" UI:
<!DOCTYPE html>
<html>
<head>
<title>In-range and out-of-range</title>
<style>
input:in-range {
border: 2px solid #2e8b57;
}
input:out-of-range {
border: 2px solid #d9534f;
background-color: #fde9e9;
}
</style>
</head>
<body>
<label>Pick a quantity (1–10):</label>
<input type="number" min="1" max="10" value="25" />
</body>
</html>:out-of-range vs :invalid
These two are often confused. :invalid is the broader rule — it matches any failed constraint, including a missing required value, a malformed email, or a step mismatch. :out-of-range is narrower: it only fires for a value that is below min or above max.
A value that is out of range is also invalid, so :invalid will match it too. Use :out-of-range when you specifically want to tell the user "that number is too big/small" rather than a generic error. See :invalid and :valid for the broader validation pseudo-classes.
:out-of-range styles the field but does not stop the form from submitting on its own. Combine it with built-in validation (the browser blocks submission of an out-of-range value when min/max are set) or server-side checks. Never rely on CSS alone for data integrity.
Related pseudo-classes
:in-range— the opposite of this selector.:validand:invalid— match overall form-control validity.:requiredand:optional— match by therequiredattribute.