2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] 疑似セレクタ「:valid」で内容検証に成功したフォーム関連要素にスタイルを適用しよう!

疑似セレクタ(:valid)の評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)




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

疑似セレクタ「:valid」は入力内容を検証した結果が有効だった要素にスタイルを適用します。

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




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

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

<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:valid {
 border: 2px solid blue;
}

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

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




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です