: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.

:invalidCSS擬似クラスで、 <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
# selector-invalid
Selectors Level 4
# invalid-pseudo

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:invalid
Applies to <form> elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報