疑似クラス invalid

疑似クラス invalid は、無効な値、 または指定されたタイプに対応しない値が 入力された入力欄のスタイルを設定します。

構文

cssセレクター:invalid {

}

例

入力された値が無効な場合は入力欄の背景をピンク色に、 選択されたタイプに対する検証を通過した場合は 緑色に戻すようにしてみましょう：

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

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

Результат:

関連項目