:invalid
は CSS の擬似クラスで、 <input>
要素や <form>
要素のうち内容が検証に失敗したものを表します。
/* 無効な <input> を選択 */
input:invalid {
background-color: pink;
}
この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。
構文
:invalid
例
この例は、検証ができた要素を緑に色付け、検証ができなかった要素を赤に色付ける単純なフォームを表しています。
HTML
<form>
<div class="field">
<label for="url_input">URL を入力して下さい:</label>
<input type="url" id="url_input">
</div>
<div class="field">
<label for="email_input">メールアドレスを入力して下さい:</label>
<input type="email" id="email_input" required>
</div>
</form>
CSS
label {
display: block;
margin: 1px;
padding: 1px;
}
.field {
margin: 1px;
padding: 1px;
}
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
プロパティを用いて赤く「伸びる」スタイル)を適用します。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard :invalid の定義 |
現行の標準 | 変更なし。 |
HTML5 :invalid の定義 |
勧告 | HTML の意味論と制約検証を定義。 |
Selectors Level 4 :invalid の定義 |
草案 | 初回定義。 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- 検証に関する他の擬似クラス:
:required
,:optional
,:valid
- 関連する Mozilla の擬似クラス:
:-moz-ui-invalid
,:-moz-submit-invalid
- フォームデータの検証
- JavaScript からの validity state へのアクセス