:in-range pseudo-class

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

Syntax

selector:in-range {...}

Parameters

selector

A CSS simple selector.

Standards information

Remarks

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

Examples

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


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

See also

Related pseudo-classes
:out-of-range

 

 

Show: