{"id":14208,"date":"2011-09-06T20:08:53","date_gmt":"2011-09-07T03:08:53","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14208"},"modified":"2021-01-07T08:03:30","modified_gmt":"2021-01-07T16:03:30","slug":"in-range","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/i\/in-range\/","title":{"rendered":":in-range"},"content":{"rendered":"\n

The :in-range<\/code> pseudo selector in CSS matches input elements when their value is within the range specified as being acceptable. It is part of the CSS Selectors Level 4 specification<\/a> which is currently in Editor’s Draft.<\/p>\n\n\n\n

<input max=\"10\" min=\"5\" type=\"number\"><\/code><\/pre>\n\n\n\n
input:in-range {\n  border: 5px solid green;\n}<\/code><\/pre>\n\n\n\n
I believe it’s only relevant on input[type=number]<\/code>. 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.<\/p>\n\n\n
Demo<\/h3>\n\n\n
Just like the code above, this input will have a green border when its value is between 5 and 10.<\/p>\n\n\n\n
<\/p>\n\n\n
Browser support<\/h3>\n\n
This browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div>
Desktop<\/h4>
Chrome<\/span><\/th>Firefox<\/span><\/th>IE<\/span><\/th>Edge<\/span><\/th>Safari<\/span><\/th><\/tr><\/thead>
53<\/span><\/td>50<\/span><\/td>No<\/span><\/td>79<\/span><\/td>10.1<\/span><\/td><\/tr><\/table><\/div>
Mobile \/ Tablet<\/h4>
Android Chrome<\/span><\/th>Android Firefox<\/span><\/th>Android<\/span><\/th>iOS Safari<\/span><\/th><\/tr><\/thead>
123<\/span><\/td>124<\/span><\/td>123<\/span><\/td>10.3<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n