:out-of-range pseudo-class

Applies one or more styles to specified input fields when the fields are out of range.

Syntax

selector:out-of-range {...}

Parameters

selector: A CSS simple selector.

Standards information

HTML 5.1, Section 4.15.2

Remarks

A field will be out of range so long as the designated value is below or above a specified minimum and maximum range. A value that is within the specified range will be considered in range.

Examples

The following example allows a number to be typed into a box. If the number typed in is not between 0 and 2, the box's background will be red, indicating that it's not within range. If the number is within range, the box's background will be white.

CSS


<!DOCTYPE html >
<html>
<head>
    <style type="text/css">
        input:out-of-range 
        {
            background-color: rgba(255, 0, 0, 1);
        }    
    </style>
</head>
<body>
    <form action="" id="numBox">
    <p>
        <label for="input">The range is from 0 to 2. A red box means you're out of range!</label>    
        <input id="input" type="number" min="0" max="2" value="3" />        
    </p>
</form> 
</body>
</html>