CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS関数（Functions）CSSセレクタ全書

CSS :invalid選択子

:invalid CSS 擬似クラスは、任意の検証に失敗した<input>やその他の<form>要素を示します。

　完全なCSS選択子リファレンスマニュアル

オンラインサンプル

input要素の値が無効な場合、スタイルを青色に設定します：

サンプル

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>　
<style>
input:invalid
{
　　　　border:2px　solid　blue;
}
</style>
</head>
<body>
<h3>　:invalid　選択子の例を示します。</h3>
<input　type="email"　value="supportEmail"　/>
<p>合法なe-メール　アドレス、スタイルの変更を確認してください。</p>
</body>
</html>

テストして見て‹/›

定義と使用

:invalid 選択子は、フォーム要素の値が無効な場合に指定されたスタイルを設定するために使用されます。

注意： 　:invalid 選択子は、指定可能な範囲値を持つ要素（例：input要素のminおよびmax属性、正しいemailフィールド、合法な数字フィールドなど）にのみ適用されます。

ブラウザの互換性

テーブルの数字は、その属性をサポートする最初のブラウザのバージョン番号を示します。

選択子
:invalid	10.0	10.0	4.0	5.0	10.0

CSS　使用法

/*　任意の無効な<input>を選択できます　*/
input:invalid　{
　　background-color: ピンク;
}

この擬似クラスはユーザーのフィールドエラーを強調表示するのに非常に役立ちます。