:in-range

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. User Avatar
    Kamil Ogórek
    Permalink to comment#

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

  2. User Avatar
    Maurizio
    Permalink to comment#

    Look like it works on Android Firefox too!

  3. User Avatar
    Mohammad Hamza Dhamiya
    Permalink to comment#

    Never knew that something like this existed.

  4. User Avatar
    Josimar Bezerra
    Permalink to comment#

    I’m thankful for find this. Very interesting.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag