CSSの:invalidでフォーム入力が無効な場合のスタイルを設定する方法をわかりやすく解説

2024.09.13
スポンサーリンク

:invalid は、フォーム要素（<input>, <textarea>, <select> など）が入力の検証に失敗した場合に適用される擬似クラスです。フォームの入力が指定された形式に従っていない場合に、このクラスを使ってユーザーに視覚的にエラーを伝えることができます。

スポンサーリンク

:invalid の値とその効果の一覧

  • :invalid – フォーム要素の入力が無効である場合に適用されるスタイル。

注意点や関連情報

:invalid は、HTML5 のフォーム検証機能と連携して動作します。検証基準は type 属性、required 属性、pattern 属性などによって決定されます。スタイルだけでなく、ユーザーにエラーメッセージが表示されることもあります。

:invalidが効かない理由として考えられること

対象の要素がフォーム要素でない

:invalidは<input>や<textarea>など、フォーム要素のバリデーションに基づいて適用されます。非フォーム要素には適用されません。
対策：<input>や<textarea>など、バリデーションが適用される要素で使用することを確認します。非フォーム要素には他の手法でスタイルを制御します。

フォーム要素にバリデーションルールが設定されていない

:invalidは、required、pattern、type、min、maxなどのバリデーションルールが設定されている場合に適用されます。これらが設定されていないと、:invalidは機能しません。
対策：フォーム要素に適切なバリデーションルール（例：requiredやpattern属性）を設定し、バリデーションエラー時に:invalidが適用されることを確認します。

共通するCSSコード

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

.css-sample-input {
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    width: 100%;
}

.css-sample-input:invalid {
    border-color: red;
    background-color: #ffe6e6;
}

.css-sample-input:valid {
    border-color: green;
    background-color: #e6ffe6;
}

label {
    font-weight: bold;
}

表示例

CSS :invalid

HTMLコード

<div class="css-sample-container">
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" class="css-sample-input" required />
</div>

CSSコード

.css-sample-input:invalid {
    border-color: red;
    background-color: #ffe6e6;
}

.css-sample-input:valid {
    border-color: green;
    background-color: #e6ffe6;
}

表示結果

この例では、ユーザーが無効なメールアドレスを入力した場合、入力欄が赤く表示され、背景色も赤みがかった色に変わります。逆に、有効なメールアドレスが入力されると、緑色で示されます。

まとめ

  • :invalid は、フォーム要素の入力が検証に失敗した場合に適用される擬似クラスです。
  • HTML5 のフォーム検証機能と連携し、ユーザーに無効な入力を視覚的に伝えることができます。
  • 入力の検証基準は type 属性や pattern 属性などに依存します。
  • CSS の :valid と組み合わせて、入力が有効な場合のスタイルも設定できます。
スポンサーリンク