问HTML5所需的输入样式

EN

是的，正如SLaks所说，没有CSS选择器可以做到这一点。我怀疑这是否会在CSS的范围内，因为CSS需要检查输入的内容。

不过，最好的选择可能是在单击按钮时调用javascript验证函数，而不是实际提交表单。然后检查相应内容的必填字段，并提交表单或突出显示未填写的必填字段。

http://docs.jquery.com/Plugins/validation，JQuery有一些很好的插件可以帮你解决这个问题

您可以使用:valid和:invalid选择器。像这样的东西

.field:valid {
    border-color:#0f0;
}
.field:invalid {
    border-color:#f00;
}

但是，这仅适用于支持本机验证的浏览器，并且仅适用于有意义的字段。据我所知，目前这只意味着Chrome (可能是Safari，但还没有检查)。

因此，本机验证的意思是，在chrome中，如果你使用<input type="email">，字段的值将被验证为电子邮件类型的字符串(不需要任何额外的javascript)，所以上面的样式可以工作。但是，如果将它们附加到type="text"字段或第二个密码字段(假设与第一个字段匹配)，则只会得到绿色，因为所有内容都是有效的，而在密码的情况下，无论如何都没有对应的“类型”。

这基本上意味着，要支持所有浏览器，更重要的是，要支持更广泛的验证，您仍然必须求助于javascript，在这种情况下，分配.valid/.invalid类应该不是问题。:)

我求助于在提交时使用JavaScript将一类.validated应用于表单，然后使用该类设置:invalid字段的样式，例如：

.validated input:invalid {
  ...
}

这样，只有在表单提交后，字段才不会在页面加载时显示为无效。

理想情况下，在提交时会有一个伪类应用于表单。