:in-range クラス

　:in-range クラスは、エレメントの属性である min と max による値が範囲内なら、設定されたスタイルを反映する擬似クラスです。
　 min 値 <= 範囲 <= max 値であるなら設定したスタイルシートが反映されます。

　関係する <label> も、"+label" セレクターでスタイルを設定することができます。

:in-range

input:in-range{
	outline: 2px green solid;
}

input:in-range + label{
	background-color: #01DF0177;
}

詳しくは Example を参照してください

　対になる疑似クラスに :out-of-range クラスがあります。:out-of-range クラスはminとmax属性の値が範囲外ならスタイルを反映します。

構文(Syntax)

HTMLElement:in-range {
	style_propaty: value;
	...
}

　疑似クラスはDOM ( JavaScript )から操作できません。
　スタイルのみの操作は擬似クラスを利用したほうが簡易です。

　:in-rangeの例です。

　:in-range クラスは、エレメントの属性である min と max による値が min 値 <= 範囲 <= max 値であるなら設定したスタイルシートが反映されます。

　以下の例では、:out-of-rangeクラスも使っています。範囲外になるとアラートが出ます。