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

标签 css html twitter-bootstrap responsive-design

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

最佳答案

这是验证电子邮件的示例:

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

关于css - 输入无效值时,如何更改文本类型输入字段的背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21467011/

相关文章:

css - 带有背景图像的 Internet Explorer hell

javascript - 无论先前的元素长度如何,如何将 anchor 对齐到中心

jQueryUI 对表列的影响

javascript - 重绘而不丢失数据

javascript - 为什么我不能用 VBA 访问这个弹出框的内容?

css - :after :before selector 的不同配色方案

javascript - 将多个字段的值传递给jquery

css - 带有左、中或右对齐元素的 Bootstrap 导航栏

html - Bootstrap Glyphicons 未在底部导航栏上垂直对齐

javascript - Bootstrap/bootflat 和 jQuery 进度条