【CSS Modules】:in-range疑似クラスの使い方
:in-range疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:in-rangeクラスは、その入力値が許可された範囲内にあるフォーム要素を表すクラスです。
これはCSSの擬似クラスであり、主にHTMLの<input>要素やその他のフォーム関連要素で、min属性とmax属性によって有効な値の範囲が定義されている場合に適用されます。ユーザーが入力した値や選択した日付などが、これらの属性で指定された最小値と最大値の間に正確に収まっている状態の要素を選択するために使用されます。例えば、<input type="number" min="0" max="100">のような数値入力フィールドで、ユーザーが「50」と入力すると、そのフィールドは:in-rangeの状態となり、定義されたCSSスタイルが適用されます。この機能は、フォームの入力検証を視覚的にユーザーへ伝えるために非常に有用です。入力値が範囲内にあれば緑色に、範囲外であれば赤色にするなど、状態に応じたフィードバックを提供することで、ユーザーの操作を支援し、フォームのユーザビリティを高めることができます。対照的に、入力値が指定された範囲外にある要素を選択する際には、:out-of-range擬似クラスが用いられます。システム開発において、ユーザーインターフェースの品質向上に不可欠な要素の一つです。
公式リファレンス: :in-range
構文(syntax)
1:in-range { 2 /* スタイルを記述 */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません