Treehouse: Grow your CSS skills. Land your dream job.

:out-of-range

Last updated on:

The :out-of-range pseudo selector in CSS matches input elements when their value is outside the range specified as being acceptable.

<input type="number" min="5" max="10">
input:out-of-range {
  border: 5px solid red;
}

I believe it's only relevant on input[type=number]. Range inputs don't allow values outside their min/max and it doesn't make much sense on any other type of input. Perhaps text-y inputs with a maxlength, but the behavior on those in most browsers is to prevent entry past the max anyway.

Demo

Just like the code above, this input will have a green border when its value is between 5 and 10.

More Info

Browser Support

Chrome Safari Firefox Opera IE Android iOS
10+ 5.2+ 19- 11+ 10- 2.3+ 4+

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```