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
基本対応Chrome 完全対応 10Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 10Safari 完全対応 5WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10Safari iOS 完全対応 5Samsung Internet Android ?
Applies to <form> elementsChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 13IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 14Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

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

関連項目

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

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