[CSS] 疑似セレクタ「:invalid」で無効な入力内容が含まれたフォーム関連要素にスタイルを適用しよう!

1.疑似セレクタ「:invalid」とは?

疑似セレクタ「:invalid」はinput要素やform 要素のうち内容が検証に失敗したものにスタイルを適用します。

これにより入力欄のデータ形式が不適切であることをユーザーが確認しやすくなる外観を簡単に適用できるようになります。

2.疑似セレクタ「:invalid」の使い方

それでは疑似セレクタ「:invalid」の使い方をみていきましょう。

<form>
 <div class="field">
  <label for="url_field">URL</label>
  <input type="url" id="url_field">
 </div>

 <div class="field">
  <label for="email_field">email</label>
  <input type="email" id="email_field">
 </div>
</form>

input:invalid {
 border: 2px solid red;
}

上記の例では誤った形式で入力された要素にスタイルを適用します。

疑似セレクタはなかなかイメージしづらいので実際に使ってみてどのようにスタイルが適用されるか確認するといいかと思います。