CSS :in-range & :out-of-range Selectors

CSS :in-range and :out-of-range selectors

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!

Share this: