浏览器使用什么CSS来设置无效的<input type ="email"> s？

Question

好的,所以在HTML5浏览器中你可以:

<input class="txt-box" type="email" name="email" rel="required" />

如果电子邮件的格式不正确,则会在其周围放置一个红色框.

我的问题是:决定这种风格的CSS是什么？

Answer 1

取决于浏览器.这应该涵盖你的基础:

input:invalid, input:-moz-ui-invalid {
    border:0;
    outline:none;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}

在兼容的浏览器中测试效果:

input[type="email"] {
    border:0;
    outline:none;
    box-shadow:none;
}

IE7合规性要求:

input.txt-box {
    border:0 !important;
    outline:none !important;
    box-shadow:none;
}

https://developer.mozilla.org/en/CSS/%3Ainvalid

示例:http://jsfiddle.net/AlienWebguy/cUgW4/

Answer 2

如果您在Firefox中安装Firebug扩展并使用它来检查相关的表单字段,您将能够看到Firefox内部使用的CSS来设置它的样式.(确保在"样式"选项卡的弹出菜单中勾选"显示用户代理CSS".)

在Mac上的Firefox 5中,它使用以下CSS:

:-moz-ui-invalid:not(output) {
    box-shadow: 0 0 1.5px 1px red;
}

有趣的是他们使用box-shadow.我最近看到的Stack Overflow上有一个提到:-moz-ui-invalid选择器的问题:如果验证失败,请参阅样式HTML5输入类型.