HTML5 〜　validationとCSSで入力チェックに通らなかった項目に色をつける

これは使えるかなと思った。
http://wbs-newworld.appspot.com/html5studyValidationCSS.html


入力必須項目には背景色を付けておき、視覚的に入力必須項目を伝えることは大切だ。
一旦入力した後に、送信ボタンを押して、入力チェックに通らず、入力し直しとなるサイトもあるが、相当イライラする。先に教えてくれとｗ。

そういうことを防ぐためにも、HTML5で用意されたvalidation機能とCSSを組み合わせて使用したい。

例えば、下記ソースは入力チェックに通らない値の場合は背景色をピンクにするサンプルである。もちろん、入力チェックに通る値を入力した時点で背景色はなくなる。

<style>
/* 入力値が異常の場合は、背景色をピンクにする */
:invalid {
  background-color: pink;
}
:out-of-range {
  background-color: red;
}
:required {
  border-style: solid;
}
</style>
<body>
<!-- 未入力の場合だと、テキストボックスの背景色はピンク -->
<input type="text" required="true">
</body>