:in-range and :out-of-range CSS pseudo-classes

If a temporal or number `<input>` has `max` and/or `min` attributes, then `:in-range` matches when the value is within the specified range and `:out-of-range` matches when the value is outside the specified range. If there are no range constraints, then neither pseudo-class matches.

W3C Working Draft: https://www.w3.org/TR/selectors4/#range-pseudos

Usage: 95.8% + 0.24% = 96%

Support summary

Notes

Note that `<input type="range">` can never match `:out-of-range` because the user cannot input such a value, and if the initial value is outside the range, the browser immediately clamps it to the minimum or maximum (as appropriate) bound of the range.

  1. Opera Mini correctly applies style on initial load, but does not correctly update when value is changed.
  2. `:in-range` also incorrectly matches temporal and `number` inputs which don't have `min` or `max` attributes. See Edge bug, Chrome bug, WebKit bug.
  3. `:in-range` and `:out-of-range` incorrectly match inputs which are disabled or readonly. See Edge bug, Mozilla bug, WebKit bug, Chrome bug.

Links

Full support table

IE

5.567891011
nnnnnnn

Edge

121314151617187980818384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
naaaaaayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Firefox

233.53.6456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnaaaaaaaaaaaaaaaaaaaaayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Chrome

4567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
nuuuuuuuuuuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Safari

3.13.2455.166.177.1899.11010.11111.11212.11313.11414.11515.115.2-15.315.415.515.616.016.116.216.316.416.516.617.017.117.217.317.417.517.618.018.118.218.318.418.5-18.626.0TP
nnnuaaaaaaaaayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Opera

99.5-9.610.0-10.110.510.61111.111.511.61212.11516171819202122232425262728293031323334353637383940414243444546474849505152535455565758606263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
uuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Safari on iOS

3.24.0-4.14.2-4.35.0-5.16.0-6.17.0-7.188.1-8.49.0-9.29.310.0-10.210.311.0-11.211.3-11.412.0-12.112.2-12.513.0-13.113.213.313.4-13.714.0-14.414.5-14.815.0-15.115.2-15.315.415.515.6-15.816.016.116.216.316.416.516.6-16.717.017.117.217.317.417.517.6-17.718.018.118.218.318.418.5-18.626.0
nnnaaaaaaaayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Opera Mini

all
a

Android Browser

2.12.22.3344.14.2-4.34.44.4.3-4.4.4139
nnnnaaaaay

Blackberry Browser

710
na

Opera Mobile

101111.111.51212.180
aaaaaay

Chrome for Android

139
y

Firefox for Android

142
y

IE Mobile

1011
nn

UC Browser for Android

15.5
y

Samsung Internet

45.0-5.46.2-6.47.2-7.48.29.210.111.1-11.212.013.014.015.016.017.018.019.0202122232425262728
ayyyyyyyyyyyyyyyyyyyyyyyy

QQ Browser

14.9
y

Baidu Browser

13.52
y

KaiOS Browser

2.53.0-3.1
ay

Back to list

Data copyright caniuse.com