延迟HTML5：无效伪类直到第一个事件

我最近发现：无效伪类适用于页面加载时所需的表单元素。例如，如果您有以下代码：

<style>
input:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
</style>
…
<input name="foo" required />

然后您的页面将加载一个空的粉红色输入元素。内置到HTML5的验证是伟大的，但我不认为大多数用户期望表单验证之前，他们有机会输入任何值。有没有办法延迟伪类的应用，直到影响该元素的第一个事件(形式提交，模糊，更改，任何适当的)？有没有JavaScript可以做到这一点？

解决方法

http://www.alistapart.com/articles/forward-thinking-form-validation/

Since we only want to denote that a field is invalid once it has
focus,we use the focus pseudo-class to trigger the invalid styling.
(Naturally,flagging all required fields as invalid from the start
would be a poor design choice.)

遵循这个逻辑，你的代码看起来像这样…

<style>
    input:focus:required:invalid {background-color: pink; color: white;}
    input:required:valid {background-color: white; color: black; }
<style>

在这里创建一个小提琴：http://jsfiddle.net/tbERP/

正如你所猜测的，正如你从小提琴中看到的，这种技术只在元素具有焦点时才显示验证样式。只要您关闭焦点，样式就会丢弃，无论它是否有效。不理想的任何手段。