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

:in-range

Last updated on:

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

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

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+

Comments

  1. Kamil Ogórek
    Permalink to comment#

    You can always value by hand, then it’s useful :)

  2. Maurizio
    Permalink to comment#

    Look like it works on Android Firefox too!

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>
```