样式HTML5输入类型（如果验证失败） [英] Style HTML5 input types if validation fails

问题描述

你们每个人

我的问题很简单：我需要为无法验证的输入设置红色边框（或阴影） ）。有没有新的CSS技巧这样做？

My question is quite simple: I need to style the red border (or shadow?) of the inputs that couldn't be validated (like email). Is there any new CSS trick to do that?

如果你还是不明白我告诉你，那么这是需要改变的颜色：

If you still don't understand what I am telling you, then this is the color that needs changing:

推荐答案

请参阅 https://developer.mozilla.org/en/CSS/%虽然可能没有-moz的部分也适用于其他浏览器，但Firefox的详细信息却无效：

$ c>：invalid CSS伪类自动应用于< input>
元素，其内容无法根据输入的类型
设置。这允许你容易地有无效的字段采用
外观，帮助用户识别和更正错误。

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.

默认情况下，Gecko不应用样式：invalid 伪类。
然而，它应用一个样式（一个红色的辉光使用box-shadow
属性）到： - moz-ui-invalid -class，适用于
子集的：invalid 。

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.

这篇关于样式HTML5输入类型（如果验证失败）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！