疑似クラス in-range
疑似クラス in-range は、値が特定の範囲内で
指定されている要素にスタイルを設定します。値の範囲は、
属性 min と max によって設定する必要があります。
構文
セレクター:in-range {
}
例
1から5までの範囲の数字が入力された入力欄の背景色を 水色に設定し、選択された範囲内に入力値が含まれない場合に 背景をピンク色に設定してみましょう：
<form>
<p>1から5までの数値を入力してください</p>
<p>
<input type="number" min="1" max="5" value="1">
</p>
</form>
input:in-range {
background: #C2DDFD;
}
input:out-of-range {
background: #E37D76;
}
:
関連項目
-
疑似クラス
:out-of-range、
これは値が範囲外にある要素のスタイルを設定します -
疑似クラス
:valid、
これは正しい値が入力された入力欄のスタイルを設定します -
疑似クラス
:invalid、
これは不正な値が入力された入力欄のスタイルを設定します
