Form validity pseudo-classes
:in-range は CSS の擬似クラスで、現在の値が min および max 属性による制限範囲内にある <input> 要素を表します。
css
/* 入力範囲が設定されていて、値がその範囲に該当する <input> 要素をすべて選択 */ input:in-range { background-color: rgba(0, 255, 0, 0.25); }
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 10 | 13 | 29 | 5.1 | 18 | 5 | |
| その他 | ||||||
| `:無効` | 10 | 12 | 4 | 5 | 18 | 5 |
| CSS セレクタ | ||||||
form `<form>` 要素に適用されます | 40 | 79 | 13 | 9 | 40 | 9 |
| その他 | ||||||
| `:オプション` | 10 | 12 | 4 | 5 | 18 | 5 |
| `:範囲外` | 10 | 13 | 29 | 5.1 | 18 | 5 |
| `:必須` | 10 | 12 | 4 | 5 | 18 | 5 |
| `:有効` | 10 | 12 | 4 | 5 | 18 | 5 |
| CSS セレクタ | ||||||
form `<form>` 要素に適用されます | 40 | 79 | 13 | 9 | 40 | 9 |
注釈 1件
実装メモ
- Chrome 52 より前では、「:in-range」は無効な入力と読み取り専用の入力に一致していました (バグ 41248615 を参照)。 Chrome 52 では、有効な読み取り/書き込み入力のみに一致するように変更されました。
注釈 1件
実装メモ
- Firefox 50 より前では、「:in-range」は無効な入力と読み取り専用の入力に一致していました (バグ 1264157 を参照)。 Firefox 50 では、有効な読み取り/書き込み入力のみに一致するように変更されました。
注釈 1件
実装メモ
- Safari では、「:in-range」は無効な入力と読み取り専用の入力に一致しました (バグ 156530 を参照)。 その後、有効な読み取り/書き込み入力のみに一致するように変更されました。
注釈 1件
実装メモ
- Chrome Android 52 より前では、「:in-range」は無効な入力と読み取り専用の入力に一致していました (バグ 41248615 を参照)。 Chrome Android 52 では、有効な読み取り/書き込み入力のみに一致するように変更されました。
注釈 1件
実装メモ
- iOS の Safari では、「:in-range」は無効な入力と読み取り専用の入力に一致しました (バグ 156530 を参照)。 その後、有効な読み取り/書き込み入力のみに一致するように変更されました。
基本構文
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属性を併用して全ユーザーにフィードバックを提供してください。