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

我最近发现:invalid伪类适用于required页面加载后立即生成表单元素。例如，如果您有以下代码：

<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/ http://www.alistapart.com/articles/forward-thinking-form-validation/

因为我们只想表示一个字段一旦出现就无效 focus，我们使用 focus 伪类来触发无效的样式。 （当然，从一开始就将所有必填字段标记为无效 将是一个糟糕的设计选择。）

按照这个逻辑，你的代码将看起来像这样......

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

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

正如您所猜测的，并且正如您从小提琴中看到的那样，此技术仅在元素具有焦点时显示验证样式。一旦您将焦点移开，样式就会被删除，无论它是否有效。无论如何都不理想。