如果验证失败，则为 HTML5 输入类型设置样式

【问题标题】：Style HTML5 input types if validation fails如果验证失败，则为 HTML5 输入类型设置样式
【发布时间】：2011-08-02 11:18:06
【问题描述】：

大家好

我的问题很简单：我需要为无法验证的输入（如电子邮件）设置红色边框（或阴影？）的样式。有什么新的 CSS 技巧可以做到这一点吗？

如果你还是不明白我在说什么，那么这就是需要改变的颜色：

【问题讨论】：

标签： css html styling

【解决方案1】：

有关 Firefox 的详细信息，请参阅https://developer.mozilla.org/en/CSS/%3Ainvalid，尽管可能没有“-moz”的部分也适用于其他浏览器：

:invalid CSS 伪类自动应用于<input> 内容无法根据输入类型验证的元素环境。这使您可以轻松地让无效字段采用有助于用户识别和纠正错误的外观。

默认情况下，Gecko 不会将样式应用于 :invalid 伪类。但是它确实应用了一种样式（使用 box-shadow 的红色“发光” 属性）到:-moz-ui-invalid 伪类，它适用于 :invalid 的案例子集。

【讨论】：