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

Question

大家好

我的问题很简单:我需要为无法验证的输入(如电子邮件)设置红色边框(或阴影？)的样式。是否有任何新的 CSS 技巧可以做到这一点？

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

Answer 1

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

The :invalid CSS pseudo-class is applied automatically to <input> elements whose contents fail to validate according to the input's type setting. This allows you to easily have invalid fields adopt an appearance that helps the user identify and correct errors.

By default, Gecko does not apply a style to the :invalid pseudo-class. However it does apply a style (a red "glow" using the box-shadow property) to the :-moz-ui-invalid pseudo-class, which applies in a subset of cases for :invalid.