疑似クラス out-of-range

疑似クラス out-of-range は、指定された範囲の枠を超える値を持つ要素にスタイルを設定します。値の範囲は、属性 min および max によって指定する必要があります。

構文

cssセレクタ:out-of-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;
}

Результат:

関連項目