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

Question

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

Answer 1

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

<强> HTML

<input type="email" required/>

<强> CSS

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

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

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

  

tel，url，email，datetime，date，month，week，time，datetime-local，number，range，color

<强> Example Fiddle

Answer 2

只需使用:invalid伪类：

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

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

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

的旧版浏览器