:out-of-range クラス
:out-of-range クラスは、入力された値が min と max 属性の範囲外になると、設定されたスタイルを反映する CSS の擬似クラスです。 主に min と max 属性をもつエレメント、<input> などが対象の疑似クラスです。
関係する <label> も、"+label" セレクターでスタイルを設定することができます。
input:out-of-range{ outline: 2px red solid; } input:out-of-range + label{ background-color: #FF000044; }
詳しくは Example を参照してください
対になる疑似クラスに :in-range クラスがあります。:in-range クラスはminとmax属性の値の範囲内ならスタイルを反映します。
ページ内 Index
構文(Syntax)
CSS
HTMLElement:out-of-range { style_propaties; }
DOM ( JavaScript )
疑似クラスはDOM ( JavaScript )から操作できません。
スタイルのみの操作は擬似クラスを利用したほうが簡易です。
in HTML
in JavaScript
Example
:out-of-range の例です。:in-rangeクラスも使っています。範囲外になるとアラートが出ます。
関連疑似クラス
入力値に対して検証や範囲指定に反応する疑似クラスに以下があります。多くが<form>エレメントの部品です。