HTML 5验证CSS Pseudoclass无效使用必需属性

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;
}