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

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