疑似クラス in-range

疑似クラス in-range は、値が特定の範囲内で 指定されている要素にスタイルを設定します。値の範囲は、 属性 min と max によって設定する必要があります。

構文

cssセレクター:in-range {

}

例

1から5までの範囲の数字が入力された入力欄の背景色を 水色に設定し、選択された範囲内に入力値が含まれない場合に 背景をピンク色に設定してみましょう：

html<form>
  <p>1から5までの数値を入力してください</p>
  <p>
    <input type="number" min="1" max="5" value="1">
  </p>
</form>

cssinput:in-range {
  background: #C2DDFD;
}
input:out-of-range {
  background: #E37D76;
}

Результат:

関連項目