css3のinvalidとvalid

invalid、validを使用すると、入力要素の形式が無効か有効かによってスタイルを簡単に切り替えることができる。

例

// 入力要素が不正な場合は背景色を変える。
:invalid {
  background-color: #FFD4D4;
  border: 1px solid maroon;
}

// 入力要素が有効な場合は、スタイルを適用しない
:valid {
}

必須項目で値が入力されていない場合・・・

必須項目で値が入力されている場合・・・