:invalid
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
:invalid
は CSS の擬似クラスで、 <input>
要素や <form>
要素のうち内容が検証に失敗したものを表します。
css
/* 無効な <input> を選択 */
input:invalid {
background-color: pink;
}
試してみましょう
この擬似クラスは、フィールドのエラーをユーザーに強調表示するのに便利です。
構文
:invalid
例
要素が検証に成功すると緑色に、失敗すると赤色に着色されるフォーム
HTML
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
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 つが required
の場合、 :invalid
擬似クラスはグループ内のボタンが 1 つも選択されていない時に選択されます。(グループ化されたラジオボタンは同じ name
属性を共有しています。)
Gecko の既定値
既定で Gecko は :invalid
擬似クラスのスタイルを適用しません。しかし、 :invalid
の場合のサブセットに適用される :-moz-ui-invalid
擬似クラスにスタイル(box-shadow
プロパティを用いて赤く「伸びる」スタイル)を適用します。
仕様書
Specification |
---|
HTML Standard # selector-invalid |
Selectors Level 4 # validity-pseudos |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 検証に関する他の擬似クラス:
:required
,:optional
,:valid
- 関連する Mozilla の擬似クラス:
:user-invalid
,:-moz-submit-invalid
- フォームデータの検証
- JavaScript からの validity state へのアクセス