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 の定義
草案 初回定義。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:invalidChrome 完全対応 10Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 10Safari 完全対応 5WebView Android 完全対応 37Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 5Samsung Internet Android ?
Applies to <form> elementsChrome 完全対応 40Edge 未対応 なしFirefox 完全対応 13IE 未対応 なしOpera 完全対応 27Safari ? WebView Android 完全対応 40Chrome Android 完全対応 40Edge Mobile 未対応 なしFirefox Android 完全対応 14Opera Android 完全対応 27Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連項目

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, mdnwebdocs-bot, ethertank, sosleepy
最終更新者: mfuji09,