CSS :in-range Selector
Example
input:in-range {
border: 4px solid green;
}
input:out-of-range {
border: 2px solid red;
}
Meaning
The :in-range selector represents an <input> element whose current value is within the range limits specified by the min and max attributes.
This pseudo-class is useful for giving the user a visual indication that a field's current value is within the permitted limits.
Note: This pseudo-class only applies to elements that have (and can take) a range limitation. In the absence of such a limitation, the element can neither be in-range nor out-of-range.
Note: An empty <input> does not count as out of range, and will not be selected using the :out-of-range pseudo-class selector.
Tip: You could also use the required attribute and the :invalid pseudo-class to provide more general logic and styling for making inputs mandatory.
Version: CSS3
Standard Syntax
:in-range {
css declarations;
}
Browser Support
The numbers in the table specify the first browser version that fully supports the property.