CSS Reference Manual

CSS @rules

Comprehensive List of CSS Properties

CSS Functions (Functions)Comprehensive Manual of CSS Selectors

CSS :out-of-range Selector

:out-of-The CSS :out pseudo-class represents an <input> element whose current value is outside the range specified by the min and max attributes. Note: This pseudo-class is only applicable to elements that have (or can accept) a value range setting. If such a setting is missing, the element value is irrelevant to 'in-range and out-range

Complete CSS Selector Reference Manual

Online Example

Set the specified style when the input value is outside the specified range:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>/title>　
<style>
input:out-of-range
{
　　　　border:2px solid blue;
}
</style>
</head>
<body>
<h3> :out-of-range Selector Example Demonstrates.</h3>
<input type="number" min="8" max="18" value="20"　/>
<p>Enter a value in the input (less than　8　or greater than　18), see the style changes.</p>
</body>
</html>

Test It Out ‹/›

Definition and Usage

:out-of-The range selector is used to define the style displayed when the value of the label is outside the specified range.

Note: 　:out-of-The range selector only acts on elements that can specify values outside of the specified range, such as the min and max attributes of an input element.

Browser Compatibility

The numbers in the table indicate the first browser version number that supports this attribute.

Selector
:out-of-range	10.0	Not Supported	28.0	5.2	11.0

CSS Syntax

/*　This pseudo-class can select any <input>, but it is only valid if the element specifies a value range and the element value is within the specified range.　*/
input:out-of-range {
　　background-color: rgba(255, 0, 0, 0.25);
}

This pseudo-class is used to provide a visual cue to the user indicating that the current value of the input field is outside the allowed range.

CSS Selector :in-range