この記事では、CSS3 で必須、フォーカス、有効および無効なスタイルを定義する方法を紹介します。この方法は現在、ie9+ および ff、gg ブラウザーのみをサポートしています。
css3 ヒントは高度なブラウザーにのみ適用されます:
Chrome
Firefox
Safari
IE9+
有効、無効、必須の定義
input:required, input:valid , input:invalid{ border:0 none; outline: 0 none; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow: none; } /* by http://www.manongjc.com/article/1327.html */
以前は、検証フォームは js と正規表現を使用して、入力されたかどうかを判断していました。メール確認など内容は正しかったです。
HTML5 の登場により、js や正規表現を記述せずにフォームの内容をチェックするという問題を解決できる属性がいくつか提供されました。
:required
必須、つまり入力を空にすることはできないことを意味します。
:valid
は有効です。つまり、入力されたコンテンツが要件を満たしている場合にトリガーされます。
:invalid
無効、つまり、入力されたコンテンツが要件を満たしていない場合にトリガーされます。