:in-range は、フォーム要素（特に <input type="number"> や <input type="range"> などの数値入力タイプ）の値が指定された範囲内に収まっている場合に適用される擬似クラスです。これを使用することで、ユーザーが入力した値が範囲内かどうかを視覚的に知らせることができます。
INDEX
:in-range の値とその効果の一覧
:in-range– 値が指定された範囲内にある場合に適用されるスタイル。
注意点や関連情報
:in-range は、数値入力を必要とするフォーム要素にのみ適用されます。通常、min 属性と max 属性が設定された <input> 要素に対して動作します。また、範囲外の値には :out-of-range が適用されます。
:in-rangeが効かない理由として考えられること
対象の要素が<input>の範囲指定に対応していない
:in-rangeは<input type="number">や<input type="range">など、数値や範囲の入力にのみ適用されます。それ以外の入力タイプには効果がありません。
対策：対象の要素が<input type="number">や<input type="range">であることを確認します。それ以外の要素では機能しないため、適切な要素に対して使用します。
minおよびmax属性が設定されていない
:in-rangeは、minとmax属性で指定された範囲内に値が収まっている場合に適用されます。これらの属性が設定されていないと、:in-rangeは効果を発揮しません。
対策：minおよびmax属性を<input>要素に設定し、範囲を明示的に指定します。例えば、<input type="number" min="0" max="100">のように設定します。
共通するCSSコード
.css-sample-container {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.css-sample-input {
padding: 10px;
border: 2px solid #333;
}
.css-sample-input:in-range {
background-color: #e0f7fa;
border-color: #26c6da;
}
.css-sample-input:out-of-range {
background-color: #ffebee;
border-color: #e57373;
}
表示例
CSS :in-range (範囲内の場合)
HTMLコード
<div class="css-sample-container">
<label for="number">数値を入力してください (範囲: 1～10):</label>
<input type="number" id="number" class="css-sample-input" min="1" max="10" value="5">
</div>
CSSコード
.css-sample-input:in-range {
background-color: #e0f7fa;
border-color: #26c6da;
}
表示結果
この例では、数値が 1～10 の範囲内にある場合、入力フィールドの背景色が水色に変わります。
CSS :out-of-range (範囲外の場合)
HTMLコード
<div class="css-sample-container">
<label for="range">数値を入力してください (範囲: 1～10):</label>
<input type="number" id="range" class="css-sample-input" min="1" max="10" value="15">
</div>
CSSコード
.css-sample-input:out-of-range {
background-color: #ffebee;
border-color: #e57373;
}
表示結果
この例では、数値が 1～10 の範囲外である場合、入力フィールドの背景色が赤に変わります。
まとめ
:in-rangeは、フォーム要素の入力が指定された範囲内にある場合にスタイルを適用するための擬似クラスです。- 範囲外の場合には、
:out-of-rangeという擬似クラスが適用されます。 - 通常は
minとmax属性を使用して範囲を定義します。