CSSの:out-of-rangeで、フォーム入力が指定範囲外の場合のスタイルを設定する方法をわかりやすく解説

:out-of-range は、input 要素で設定された min や max 属性を超えた値が入力されたときに、そのフィールドにスタイルを適用するための擬似クラスです。範囲外の値を入力した際、視覚的にそのフィールドが強調されるように使用します。

:out-of-range の値とその効果の一覧

• :out-of-range – 設定された範囲外の値が入力されたフォーム要素にスタイルを適用します。

注意点や関連情報

:out-of-range は、input 要素に min または max 属性が設定されている場合にのみ機能します。範囲内の値には :in-range が適用され、範囲外の値には :out-of-range が適用されます。

:out-of-rangeが効かない理由として考えられること

対象の要素が範囲指定されたフォーム要素でない

:out-of-rangeは、minやmax属性を持つフォーム要素に適用されます。対象の要素にminやmax属性が設定されていない場合、この擬似クラスは機能しません。
対策：<input>や<textarea>など、範囲を指定できるフォーム要素に対してminまたはmax属性が正しく設定されているか確認します。例えば、<input type="number" min="0" max="100">のように範囲を指定します。

共通するCSSコード

.css-sample-container {
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    max-width: 400px;
}

.css-sample-input {
    padding: 10px;
    margin-bottom: 10px;
    display: block;
    width: 100%;
}

表示例

CSS :out-of-range

:out-of-range は、設定された範囲を超えた入力フィールドにスタイルを適用します。

HTMLコード

<div class="css-sample-container">
    <label for="range-input">数値を入力してください (範囲: 10〜100)</label>
    <input type="number" id="range-input" class="css-sample-input css-sample-input-out-of-range" min="10" max="100">
</div>

CSSコード

.css-sample-input-out-of-range:out-of-range {
    border: 2px solid red;
    background-color: #ffe0e0;
}

表示結果

まとめ

• :out-of-range は、min や max 属性によって制限された範囲を超える値が入力されたときにスタイルを適用します。
• フォームの入力検証に役立ち、ユーザーが誤った値を入力した場合に視覚的に警告を表示することができます。
• :out-of-range と対になるのが :in-range で、範囲内の値にスタイルを適用します。