mozilla
Your Search Results

    :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;
    }

    仕様

    仕様書 策定状況 コメント
    WHATWG HTML Living Standard Living Standard 変更なし
    HTML5 勧告候補 HTML と制約バリデーションについて意味論的な定義
    Selectors Level 4 草案 変更なし
    CSS Basic User Interface Module Level 3 草案 擬似クラスを定義。ただし意味論と結びつけられていない

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート (<input>) 10.0 4.0 (2) 10 10.0 5.0
    <form> への適用 ? 13 (13) ? ? ?
    機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート ? 4.0 (2) 未サポート 10.0 5.0
    <form> への適用 ? 13.0 (13) ? ? ?

    関連情報

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

    Contributors to this page: sosleepy, ethertank
    最終更新者: ethertank,
    サイドバーを隠す