The :out-of-range CSS pseudo-class matches when an element has its value attribute outside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is outside the range limits. A value can be outside of a range if it is either smaller or larger than maximum and minimum set values.
Note: this pseudo-class only applies to elements that have a range limitations. In absence of such a limitation, the element can neither be 'in-range' nor 'out-of-range'.
<form action="" id="form1">
<ul>Values between 1 and 10 are valid.
<input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
<label for="value1">Your value is </label>