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

Question

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

Answer 1

下面是验证电子邮件的例子：

HTML

<input type="email" required/> 

CSS

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

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

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

电话，网址，电子邮件，日期时间，日期，月份，星期，时间，日期时间，地方，数量，范围，颜色

Example Fiddle

Answer 2

只需使用:invalid伪类：

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

该代码突出无效输入红色，并且有效输入绿色。

Demo。只要在这些输入中输入任何非数字，就会看到它变为红色而不是绿色。这对于旧版浏览器无效，即don't support input type="number"或css3 selectors。