今更ながら擬似クラスを使ったフォームバリデーションのスタイリングを試してみましたのでメモがてら。目新しい情報でもないので適当にスルーして下さいませ。

自分用のメモです。CSS3からフォーム向けの便利な擬似クラスが追加されてるのですが試してなかったのでテスト。

フォームサンプル

HTML5のフォームバリデーションサンプルです。A List Apartのデモを少し変えただけ参考に。

<div>
<label for="email">メール</label> 
<input type="email" id="email" name="email" placeholder="example@example.com" required />
<p class="val">
<span class="invalid">正しいメールアドレス入れてくださいまし。</span>
<span class="valid">正しいメールアドレスです。</span>
</p>
</div>

type="email"でメールアドレスかどうかを判断します。

form input:focus:required:valid + .val{ background: #0aab4a; }
form input:focus:required:valid + .val .invalid { display: none; }
form input:focus:required:invalid + .val .valid{ display: none; }

p要素は予めdisplay: none;にしておき、:requiredと:invalid擬似クラスで入力値に応じてスタイルします。便利ですね、これ。

<input type="tel" id="tel" name="tel" pattern="\d{10}" placeholder="0312345678" required />

pattern属性で正規表現を使って入力チェックし、マッチした/しない場合も:requiredと:invalidでスタイルできます。

HTML5はフォームバリデーションがJavaScript不要とはいえ、実際に使い場合は正規表現を覚えてる必要がありますね。

尚、フォームで使えそうな擬似クラスは他にもあるみたいです。

• enabled
• disabled
• indeterminate
• default
• required
• optional
• read-only
• read-write

この辺はリファレンスでご確認下さい。以上、メモでした。