【CSS Modules】:user-invalid疑似クラスの使い方

:user-invalidクラスは、ユーザーが入力した値が無効であることを表す、CSSの疑似クラスです。この疑似クラスは、主にHTMLのフォーム要素、例えば<input>、<select>、<textarea>などに適用されます。要素が持つバリデーション規則、例えばrequired属性で必須とされているにもかかわらず値が空である場合や、type="email"であるのにメールアドレスの形式に合致しない場合など、入力されたデータが不正な状態のときにその要素を選択するために使用されます。

この疑似クラスの主な目的は、ユーザーに対して入力エラーを視覚的に分かりやすく通知することです。例えば、無効な入力フィールドの背景色を薄い赤色に変更したり、ボーダーを強調してエラーがあることを示したりすることで、ユーザーは自身の入力ミスにすぐに気づき、修正することができます。

:user-invalidは、:invalid疑似クラスと似ていますが、重要な違いがあります。:invalidは、ページ読み込み直後から要素の値が無効であれば適用される可能性があります。一方で:user-invalidは、ユーザーがその要素に対して操作を行った後、例えば入力したり、フィールドからフォーカスを外したり、フォームの送信を試みたりした後で、値が無効であることが確認された場合にのみ適用されることが意図されています。この特性により、ユーザーがまだ入力を行っていない段階でエラーが多発するのを防ぎ、より良いユーザーエクスペリエンスを提供します。

Copy
1input:user-invalid {
2  border: 2px solid red;
3  background-color: #ffe0e0;
4}

引数なし

引数はありません

戻り値なし

戻り値はありません