CSS の :invalid
疑似クラスは、内容の検証に失敗した <input>
要素 や <form>
要素を表します。
/* 無効な <input> を選択 */ input:invalid { background-color: pink; }
この疑似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。
構文
:invalid
例
この例は、検証ができた要素を緑に色付け、検証ができなかった要素を赤に色付ける単純なフォームを表しています。
HTML
<form> <label for="url_input">URL を入力して下さい:</label> <input type="url" id="url_input" /> <br /> <br /> <label for="email_input">メールアドレスを入力して下さい:</label> <input type="email" id="email_input" required/> </form>
CSS
input:invalid { background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid { background-color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } input:required { border-color: #800000; border-width: 3px; } input:required:invalid { border-color: #C00000; }
結果
アクセシビリティの考慮事項
赤は入力が無効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。
メモ
ラジオボタン
グループのラジオボタンの1つがs required
の場合、 :invalid
疑似クラスはグループ内のボタンが1つも選択されていない時に選択されます。(グループ化されたラジオボタンは同じ name
属性を共有しています。)
Gecko の既定値
既定で Gecko は :invalid
疑似クラスのスタイルを適用しません。しかし、 :invalid
の場合のサブセットに適用される :-moz-ui-invalid
疑似クラスにスタイル(box-shadow
プロパティを用いて赤く「伸びる」スタイル)を適用します。
以下の CSS でこれを無効にしたり、無効な入力欄を完全に他のスタイルに変更したりすることができます。
:invalid { box-shadow: none; } :-moz-submit-invalid { box-shadow: none; } :-moz-ui-invalid { box-shadow: none; }
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard :invalid の定義 |
現行の標準 | 変更なし。 |
HTML5 :invalid の定義 |
勧告 | HTML の意味論と制約の検証を定義。 |
Selectors Level 4 :invalid の定義 |
草案 | 初回定義。 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:invalid | Chrome 完全対応 10 | Edge 完全対応 12 | Firefox 完全対応 4 | IE 完全対応 10 | Opera 完全対応 10 | Safari 完全対応 5 | WebView Android 完全対応 37 | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 10.1 | Safari iOS 完全対応 5 | Samsung Internet Android 完全対応 1.0 |
Applies to <form> elements | Chrome 完全対応 40 | Edge 未対応 なし | Firefox 完全対応 13 | IE 未対応 なし | Opera 完全対応 27 | Safari 完全対応 9 | WebView Android 完全対応 40 | Chrome Android 完全対応 40 | Firefox Android 完全対応 14 | Opera Android 完全対応 27 | Safari iOS 完全対応 9 | Samsung Internet Android 完全対応 4.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
関連項目
- 他の検証関連の疑似クラス:
:required
,:optional
,:valid
- 関連する Mozilla の疑似クラス:
:-moz-ui-invalid
,:-moz-submit-invalid
- フォームデータの検証
- JavaScript からの validity state へのアクセス