:invalidや:valid擬似クラスを使ったフォームバリデーションエラーメッセージのスタイルサンプル

今更ながら擬似クラスを使ったフォームバリデーションのスタイリングを試してみましたのでメモがてら。目新しい情報でもないので適当にスルーして下さいませ。 自分用のメモです。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="val

[hama_shun]

セレクタ

[kkeisuke]

CSS3

[moromoro]

jQueryのよりも楽かも

[seteoceano]

:invalidや:valid擬似クラスを使ったフォームバリデーションエラーメッセージのスタイルサンプル