The in-range pseudo-class
The in-range pseudo-class sets a style
for elements whose values are set in a specified
range. The range of values must be specified with
the min and max attributes.
Syntax
selector:in-range {
}
Example
Let's set a blue color for the background of
the input, which contains numbers that fall
in the range from 1 to 5. We
will also set a pink background when the
entered value does not fall within the
selected range:
<form>
<p>Enter number from 1 to 5</p>
<p>
<input type="number" min="1" max="5" value="1">
</p>
</form>
input:in-range {
background: #C2DDFD;
}
input:out-of-range {
background: #E37D76;
}
:
See also
-
the
:out-of-rangepseudo-class
that styles elements whose values are out of range -
the
:validpseudo-class
that sets a style for the input into which a valid value was entered -
the
:invalidpseudo-class
that sets a style for the input into which an invalid value was entered
