: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:
|
|||||||||||||||||
56 | 9.3
See notes:
|
4.4
See notes:
|
|||||||||||||||
14
See notes:
|
52 | 57 | 10
See notes:
|
10.0-10.2
See notes:
|
4.4.3-4.4.4
See notes:
|
4
See notes:
|
|||||||||||
11 | 15
See notes:
|
53 | 58 | 10.1 | 44 | 10.3 | all
See notes:
|
56 | 10
See notes:
|
37
See notes:
|
57 | 52 | 11 | 11.4
See notes:
|
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.
-
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 andnumber
inputs which don't havemin
ormax
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.