擬似クラス valid
擬似クラス validは、
正しい値または指定された型に対応する値が
入力されたinput要素のスタイルを設定します。
構文
セレクタ:valid {
}
例
間違った値が入力されたときはinputの背景をピンク色に、 選択された型の検証に合格したときは緑色に戻す例を見てみましょう。
<p>メールアドレスを入力してください</p>
<p><input type="email"></p>
input:invalid {
background: #E37D76;
}
input:valid {
background: #9DDFA4;
}
:
関連項目
-
擬似クラス
:invalid,
間違った値が入力されたinput要素のスタイルを設定します -
擬似クラス
:out-of-range,
指定された範囲を超える値を持つ要素のスタイルを設定します -
擬似クラス
:in-range,
指定された範囲内の値を持つ要素のスタイルを設定します
