css - HTML 5 検証 CSS 疑似クラスの必須属性での無効な使用

Question

HTML を実行すると、CSS が適用される必須フィールドであるため、テスト入力フィールドが自動的に無効としてマークされます。フォームが送信された後にのみこの特定の css が適用されるようにする方法はありますか?

HTML

<form name="test" action="index.html" method="get">
<label>test: <input name="test1" id="test" placeholder="enter text here" autofocus required></label>
<p><input type="submit"></p>
</form>

CSS

#test:invalid {
background-color:red;
}