浏览器使用什么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选择器的问题：请参阅Style HTML5 input types if validation fails。