CSS formのinputやselectなどに背景色をつける

基本

バリデーションチェックでエラーなヤツらに背景色をつけたい。
select・textareaはいいんだけど・・・inputタグが面倒。

inputタグには背景色が関係ない・背景色の対象にしたくないってヤツらがいる。
そして、ソイツらと他をどう分けるかってのが面倒。

▼やるなら下記のどっちか
・使う項目をCSSで指定
・CSSを設定したくないヤツを「not()」で指定
→今後のコトも考えると使わないものだけ「not()」のほうがラクな気がする。

▼CSSを設定したくないヤツ
・hidden
・チェックボックス、ラジオボタン
・ボタン系

サンプル

▼エラーなヤツらにつけるクラス名：「errElements」とする場合

<input type="text" name="〇〇〇" class="errElements" />

<style>
input.errElements:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]),
select.errElements,
textarea.errElements {
   background-color: #fbeef2;
}
</style>

「not()」を使わない場合「[type="text"].errElements」とかで全部指定（search、number、url、email、password・・・）
※HTML5を気にしないなら「text、password」だけ指定すれば良いんだけどね・・・。