:invalid

概要

CSS の :invalid 擬似クラスは、input 要素の種類に応じた 妥当性検査 (validation) に失敗したコンテンツを持つ、すべての <input> や <form> 要素を表します。このセレクタで、無効な項目の見た目を、ユーザが識別やエラーの修正をしやすいものに簡単に変えることができます。

デフォルトでは、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;
}

注記

ラジオボタン

グループ内のラジオボタン（name 属性に同じ値を持つもの）のいずれかが required であるとき、もしグループ内のどのボタンも選択されていなければ、:invalid 擬似クラスはそれらすべてに適用されます。

例

これは、有効値であれば要素の色を緑に、無効値であれば赤にする簡単な form の例です。

HTML

<form>
  <label>Enter a URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Enter an email address:</label>
  <input type="email" required/>
</form>

CSS

input:invalid {
  background-color: #ffdddd;
}
  
input:valid {
  background-color: #ddffdd;
}
  
input:required {
  border-color: #800000;
  border-width: 3px;
}

仕様

ブラウザ実装状況

関連情報

• :valid
• :-moz-submit-invalid
• :required
• :optional