擬似クラス valid

擬似クラス validは、 正しい値または指定された型に対応する値が 入力されたinput要素のスタイルを設定します。

構文

cssセレクタ:valid {
  
}

例

間違った値が入力されたときはinputの背景をピンク色に、 選択された型の検証に合格したときは緑色に戻す例を見てみましょう。

html<p>メールアドレスを入力してください</p>
<p><input type="email"></p>

cssinput:invalid {
  background: #E37D76;
}
input:valid {
  background: #9DDFA4;
}

Результат:

関連項目