:in-range 和 :out-of-range CSS 偽類別

- WD

如果時間或數字 <input> 具有 max 和/或 min 屬性,則當值在指定範圍內時,:in-range 會符合,而當值在指定範圍外時,:out-of-range 會符合。如果沒有範圍限制,則兩個偽類別都不會符合。

Chrome

  1. 4: 不支援
  2. 5 - 14: 支援狀態不明
  3. 15 - 51: 部分支援
  4. 52: 部分支援
  5. 53 - 123: 已支援
  6. 124: 已支援
  7. 125 - 127: 已支援

Edge

  1. 12: 不支援
  2. 13 - 18: 部分支援
  3. 79 - 123: 已支援
  4. 124: 已支援

Safari

  1. 3.1 - 4: 不支援
  2. 5: 支援狀態不明
  3. 5.1 - 10: 部分支援
  4. 10.1 - 17.3: 已支援
  5. 17.4: 已支援
  6. 17.5 - TP: 已支援

Firefox

  1. 2 - 28: 不支援
  2. 29 - 49: 部分支援
  3. 50 - 124: 已支援
  4. 125: 已支援
  5. 126 - 128: 已支援

Opera

  1. 9 - 9.6: 支援狀態不明
  2. 10 - 12.1: 部分支援
  3. 15 - 38: 部分支援
  4. 39: 部分支援
  5. 40 - 108: 已支援
  6. 109:受支援

IE

  1. 5.5 - 10:不受支援
  2. 11:不受支援

Chrome for Android

  1. 124: 已支援

Safari on iOS

  1. 3.2 - 4.3:不受支援
  2. 5 - 10.2:部分支援
  3. 10.3 - 17.3:受支援
  4. 17.4: 已支援
  5. 17.5:受支援

Samsung Internet

  1. 4:部分支援
  2. 5 - 23:受支援
  3. 24:受支援

Opera Mini

  1. 全部:部分支援

Opera Mobile

  1. 10 - 12.1: 部分支援
  2. 80:受支援

UC Browser for Android

  1. 15.5:受支援

Android Browser

  1. 2.1 - 3:不受支援
  2. 4 - 4.4.4:部分支援
  3. 124: 已支援

Firefox for Android

  1. 125: 已支援

QQ Browser

  1. 14.9:受支援

Baidu Browser

  1. 13.52:受支援

KaiOS Browser

  1. 2.5:部分支援
  2. 3:受支援

請注意,<input type="range"> 永遠無法符合 :out-of-range,因為使用者無法輸入此類值,而且如果初始值超出範圍,瀏覽器會立即將其調整到範圍的最小值或最大值(視情況而定)。

資源
MDN 網路文件 - CSS :out-of-range
WHATWG HTML 規範,針對 `:in-range` 和 `:out-of-range`