:out-of-range matches an <input> whose current value is outside the limits set by its min and/or max attributes.
Use it to show clear feedback while someone types—for example a red background when a ticket count is below 2 or above 6.
Without min / max, the control is neither :in-range nor :out-of-range.
CSS feedback helps users. Always validate again on the server before trusting submitted data.
:out-of-range { … }Common form: input:out-of-range.
:out-of-rangeSet limits in HTML, then style the out-of-range state in CSS.
number, date, …).min and/or max on the control.input:out-of-range { … }.:in-range for the allowed state.| Piece | Required? | Role |
|---|---|---|
| Range-capable input | Yes | Element that can take min/max |
min / max | Yes (at least one) | Defines the allowed range |
:out-of-range | Yes | Matches when the value is outside that range |
:in-range | No | Styles values inside the range |
Allowed tickets: 2–6. Change the number—values outside that range turn orange-red via :out-of-range.
Each snippet focuses on :out-of-range. Use Try It Yourself for a live editor.
Highlight a ticket count that is not between 2 and 6.
input:out-of-range {
background-color: orangered;
}min="2" and max="6" define the range.9 is greater than 6.input:out-of-range selects that state.Flag a date that is not inside the allowed year.
input[type="date"]:out-of-range {
background-color: orangered;
}type="date" supports min/max dates.:out-of-range paints the field.:in-rangeShow green for valid range values and red for out-of-range ones.
input:in-range {
background-color: rgb(0 255 0 / 25%);
}
input:out-of-range {
background-color: rgb(255 0 0 / 25%);
border: 2px solid red;
}:in-range adds a light green fill.:out-of-range adds red fill and border.Most surprises come from missing limits or empty values.
Without a range limitation, :out-of-range never applies. Add min and/or max first.
:invalidOut-of-range values are often also invalid, but :invalid covers more cases (pattern, required, type mismatch).
type="text" with min/max does not create a numeric range for this pseudo-class. Use number, date, and similar.
Pair the style with a clear label or message so the error is understandable without relying only on red/orange.
:out-of-range is a browser CSS pseudo-class. Node.js, Deno, and Bun do not evaluate it.
Supported across modern browsers (Baseline Widely available since about November 2015). Safe for progressive form feedback.
Bottom line: Production-ready for modern browsers. Keep server-side validation as the source of truth.
min and/or max.:in-range for allowed values.One line: :out-of-range styles a value that breaks the input’s min/max limits.
Style the placeholder text shown inside empty form controls.
8 people found this page helpful