:out-of-range CSS Pseudo Class

The :out-of-range CSS pseudo-class is used to target form elements whose current value is outside the range specified by their input attributes, such as min and max. It is commonly applied to inputs of type number, range, date, and other types where a numerical or date-based range can be defined. This pseudo-class allows developers to style inputs that fail the range constraints, providing visual feedback to users without relying solely on scripting.

When an input element’s value is lower than the min attribute or higher than the max attribute, the element automatically matches :out-of-range. This can be particularly useful for creating forms that guide user input with subtle visual cues, such as changing border colors or displaying warning icons.

For example, you might want to highlight a number input in red when the user enters a value that is out of the permitted range:

<input type="number" min="1" max="10" value="15" />

input:out-of-range {
    border: 2px solid red;
    background-color: #ffe6e6;
}

In this example, the input’s value is 15, which exceeds the maximum of 10, so the :out-of-range styling is applied. Conversely, when the value is within the specified range, it does not match this pseudo-class.

It is also worth noting that :out-of-range can be combined with other pseudo-classes for more nuanced feedback. For instance, combining it with :invalid can distinguish between inputs that are syntactically invalid versus those that are semantically out of the defined range. Additionally, properties like border-color, background-color, or color are commonly used to style elements affected by this pseudo-class.

Overall, :out-of-range is a valuable tool for enhancing form usability by providing immediate visual feedback based on value constraints, improving both accessibility and user experience.