CSS :in-range selector
The CSS :in-range selector matches every element with a value that is within a defined range.
Syntax:
:in-range {
CSS declarations;
} Example:
<!DOCTYPE html>
<html>
<head>
<style>
input:in-range {
border: 3px solid #2a9d8f;
}
</style>
</head>
<body>
<input type="number" min="5" max="10" value="7">
<p>Type a number out of range (less than 5 or higher than 10), to see the styling disappear.</p>
</body>
</html>Output:
Type a number out of range (less than 5 or higher than 10), to see the styling disappear.
CSS :out-of-range selector
The CSS :out-of-range selector matches every element with a value that is outside a defined range.
Syntax:
:out-of-range {
CSS declarations;
} Example:
<!DOCTYPE html>
<html>
<head>
<style>
input:out-of-range {
border: 3px solid #e76f51;
}
</style>
</head>
<body>
<input type="number" min="5" max="10" value="17">
<p>Type a number within the given range (between 5 and 10), to see the styling disappear.</p>
</body>
</html>Output:
Type a number within the given range (between 5 and 10), to see the styling disappear.
Note: The CSS :in-range and :out-of-range selectors only work for input elements with min/ max attributes.
Enjoy coding!
Read also: