Form validity pseudo-classes
HTMLフォームのバリデーション状態に基づいてスタイルを適用する擬似クラス群です。入力値の有効性（:valid/:invalid）、範囲（:in-range/:out-of-range）、必須/任意（:required/:optional）に応じたリアルタイムなフィードバックをCSSのみで実現できます。JavaScriptなしでフォームのバリデーションUIを構築する基盤です。
概要
HTMLフォームのバリデーション状態に基づいてスタイルを適用する擬似クラス群です。入力値の有効性（:valid/:invalid）、範囲（:in-range/:out-of-range）、必須/任意（:required/:optional）に応じたリアルタイムなフィードバックをCSSのみで実現できます。JavaScriptなしでフォームのバリデーションUIを構築する基盤です。
対応ブラウザ
デスクトップ
Chrome 10+
Edge 12+
Safari 5+
Firefox 4+
モバイル
Chrome Android 18+
Safari iOS 5+
Firefox Android 4+
基本構文
CSS
input:valid { border-color: #22c55e; }
input:invalid { border-color: #ef4444; }
input:required { border-left: 3px solid #3b82f6; }
input:out-of-range { background: #fef2f2; }実務での使いどころ
-
リアルタイム入力フィードバック
メールアドレス入力欄に:valid/:invalidを使用して、入力値が正しい形式かをリアルタイムに色で表示します。
注意点
- ページ読み込み直後から:invalidが適用される場合があるため、:user-invalid（ユーザー操作後のみ）の併用やJSでの制御を検討してください。
アクセシビリティ
- 色だけでバリデーション状態を伝えず、エラーメッセージやアイコン、aria-invalid属性を併用して全ユーザーにフィードバックを提供してください。