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

Question

大家好

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

如果您仍然不明白我在告诉您什么，那么这就是需要更改的颜色：

Answer 1

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

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

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