: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.

IE Edge Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Blackberry Browser Opera Mobile Chrome for Android Firefox for Android IE Mobile UC Browser for Android Samsung Internet QQ Browser Baidu Browser
49
See notes:
  • 2
  • 3
56 9.3
See notes:
  • 2
  • 3
4.4
See notes:
  • 2
14
See notes:
  • 2
52 57 10
See notes:
  • 2
  • 3
10.0-10.2
See notes:
  • 2
  • 3
4.4.3-4.4.4
See notes:
  • 2
4
See notes:
  • 2
11 15
See notes:
  • 2
53 58 10.1 44 10.3 all
See notes:
  • 1
56 10
See notes:
  • 2
37
See notes:
  • 2
57 52 11 11.4
See notes:
  • 2
5 1.2 7.12
54 59 TP 45
55 60 46
56 61

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.

Links