: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
- HTML 5.1, Section 4.15.2
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: