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

【问题标题】：What CSS is used by browsers for styling invalid <input type="email">s?浏览器使用什么 CSS 来设置无效 <input type="email"> 的样式？
【发布时间】：2011-10-18 09:58:48
【问题描述】：

好的，所以在 HTML5 浏览器中你可以拥有：

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

当电子邮件格式不正确时，它会在其周围放置一个红色框。

我的问题是：决定该样式的 CSS 是什么？

【问题讨论】：

谢谢@Paul，不知道如何表达这个问题。
这里是网址：jasonspickdesign.com/contact.php
不客气，不确定我是否说得更清楚了，这是其中一个棘手的问题。

标签： css forms html webforms

【解决方案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/

【讨论】：

将设置其默认状态的样式...而不是其无效状态。
正确，虽然我不知道您可以选择这样的表单字段，但我会为您投票。仍然需要找出无效状态。
是的，那没有任何作用。 firbug 显示了我添加的样式，但是红色的轮廓还在。
我没有看到它兄弟，即使在 Firefox 2 上也是如此。您使用什么浏览器进行测试？
@Paul 是的 FF5 是 HTML5 兼容的，所以 input type="email" 不会呈现为无效。查看 Spoon browsers 进行旧版浏览器测试。

【解决方案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。

【讨论】：