{"id":14248,"date":"2011-09-06T20:26:51","date_gmt":"2011-09-07T03:26:51","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14248"},"modified":"2021-04-12T08:13:43","modified_gmt":"2021-04-12T15:13:43","slug":"out-of-range","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/o\/out-of-range\/","title":{"rendered":":out-of-range"},"content":{"rendered":"\n

The :out-of-range<\/code> pseudo selector in CSS matches input elements when their value is outside the range specified as being acceptable.<\/p>\n\n\n\n

<input max=\"10\" min=\"5\" type=\"number\"><\/code><\/pre>\n\n\n\n
input:out-of-range {\n  border: 5px solid red;\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 max<\/code> length, but the behavior on those in most browsers is to prevent entry past the max anyway.<\/p>\n\n\n\n
The selector is defined in the Selectors Level 4 specification<\/a>, alongside its counterpart, :in-range<\/a><\/code>.<\/p>\n\n\n
Demo<\/h4>\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>
126<\/span><\/td>127<\/span><\/td>126<\/span><\/td>10.3<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n
Related properties<\/h3>\n\n\n    \t\t\n    
\n      
\n\n