疑似クラス invalid
疑似クラス invalid は、無効な値、
または指定されたタイプに対応しない値が
入力された入力欄のスタイルを設定します。
構文
セレクター:invalid {
}
例
入力された値が無効な場合は入力欄の背景をピンク色に、 選択されたタイプに対する検証を通過した場合は 緑色に戻すようにしてみましょう：
<p>メールアドレスを入力してください</p>
<p><input type="email"></p>
input:invalid {
background: #E37D76;
}
input:valid {
background: #9DDFA4;
}
:
関連項目
-
有効な値が入力された入力欄のスタイルを設定する
疑似クラス
:valid -
デフォルトの要素にスタイルを設定する
疑似クラス
:default -
指定された値の範囲内にある要素にスタイルを設定する
疑似クラス
:in-range -
値が範囲外の要素にスタイルを設定する
疑似クラス
:out-of-range
