我最近发现:invalid伪类required在页面加载时立即应用于表单元素.例如,如果您有此代码:
<style>
input:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
</style>
…
<input name="foo" required />
Run Code Online (Sandbox Code Playgroud)
然后你的页面将加载一个空的粉红色输入元素.对HTML5内置验证非常好,但我认为大多数用户都不希望表单在有机会输入任何值之前进行验证.有没有办法延迟伪类的应用,直到影响该元素的第一个事件(表单提交,模糊,更改,任何适当的)?没有JavaScript可以做到这一点吗?