Title

:in-rangeとは

ここで説明する:in-range とは次の語句からなるCSSの疑似クラスです。

in

読み: イン
意味: 中、内部

range

読み: レンジ
意味: 範囲

目次に戻る

:in-range疑似クラスの概要

この疑似クラスはセレクタに該当するinput要素への入力値が min属性とmax属性 の範囲内である時に適用され一時的なプロパティ値の変更を行います。

min属性とmax属性を持たないinput要素には無効な疑似クラスです。

この疑似クラスに類似した疑似クラスとして :out-of-range があります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。

セレクター:in-range{プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルに使うのはinput要素number型です。 この要素に:in-range疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。

目次に戻る

参考: min属性とmax属性の制限範囲内にあることを検知する

ここではサンプルとしてナンバーボックスに指定範囲内の数値が入力された時に要素の背景色と文字色を変更するようにしています。 初期値は指定範囲外の数値が入力されています。

input[type="number"]{
	color: ##gray;
	background-color: ##lightgray;
	font-weight: lighter;
}
input[type="number"]:in-range{
	color: ##black;
	background-color: ##white;
	font-weight: normal;
}

目次に戻る