:validは、フォーム要素の入力内容が妥当である場合にスタイルを適用するCSSの擬似クラスです。type属性やpattern属性、required属性などの制約を満たすと、:validが適用されます。
:validの値とその効果の一覧
:valid: フォーム要素が有効な入力を受け取った場合に適用されるスタイル。
注意点と関連情報
:validは、フォーム要素に対してのみ適用可能で、フォームのinputやtextareaなどに使います。制約条件はtypeやpattern、requiredなどの属性によって決定されます。
:validが効かない理由として考えられること
対象の要素がフォーム要素でない
:validは、フォーム要素（<input>、<textarea>など）のバリデーションに基づいてスタイルを適用します。フォーム要素以外の要素には適用されません。
対策：対象の要素がバリデーションを受けるフォーム要素であることを確認し、バリデーション対象でない要素には別のスタイル方法を検討します。
フォーム要素にバリデーションルールが設定されていない
:validは、required、pattern、min、maxなどのバリデーションルールが設定されているフォーム要素にのみ適用されます。これらが設定されていないと、:validは機能しません。
対策：フォーム要素にバリデーションルールを正しく設定します。例えば、<input type="email" required>や<input type="number" min="1" max="100">のように指定します。
フォームの入力が無効な場合
:validは、フォームの入力がバリデーションを通過した場合にのみ適用されます。無効な入力の場合は、:invalidが適用され、:validは適用されません。
対策：フォームの入力が有効であることを確認し、正しい形式や範囲の値が入力されていることをチェックします。
表示例
CSS :valid
以下の例では、:validと: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-container {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.css-sample-input {
padding: 10px;
margin: 10px 0;
border: 2px solid #ccc;
font-size: 16px;
}
.css-sample-input:valid {
border-color: #4caf50;
background-color: #e8f5e9;
}
.css-sample-input:invalid {
border-color: #f44336;
background-color: #ffebee;
}
表示結果
まとめ
- :validはフォームの入力内容が妥当である場合に適用されるスタイルです。
- フォームの入力が有効であるかどうかは、
type属性やpattern属性、required属性などによって決まります。 - :invalidと組み合わせることで、無効な入力と有効な入力のスタイルを簡単に切り替えることができます。