输入无效值时如何更改文本类型输入字段的背景颜色？

【问题标题】：How can I change the background color of input fields of text type when entering invalid values?输入无效值时如何更改文本类型输入字段的背景颜色？
【发布时间】：2014-02-23 09:02:44
【问题描述】：

当用户输入无效值时，如何使用文本类型字段的 CSS 更改输入字段的背景颜色？

【问题讨论】：

标签： css html twitter-bootstrap responsive-design

【解决方案1】：

只需使用:invalid 伪类：

input {background:#9F9;}
input:invalid {background:#F99;}

该代码将无效输入突出显示为红色，有效输入突出显示为绿色。

Demo。只需在其中任何一个输入中键入任何非数字，您就会看到它变为红色而不是绿色。这不适用于 don't support input type="number" 或 css3 selectors 的旧版浏览器。

【讨论】：

【解决方案2】：

以下是验证电子邮件的示例：

HTML

<input type="email" required/>

CSS

input:invalid {
    background-color: #FFAAAA;
}

input:valid {
    background-color: #AAFFAA;
}

您可以使用简单的 HTML 来验证所有这些数据类型：

电话、网址、电子邮件、日期时间、日期、月份、星期、时间、本地日期时间、数字、范围、颜色

Example Fiddle

【讨论】：