【问题标题】: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,不知道如何表达这个问题。
  • 不客气,不确定我是否说得更清楚了,这是其中一个棘手的问题。

标签: 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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-02-06
    • 1970-01-01
    • 1970-01-01
    • 2010-11-23
    • 2012-08-08
    • 2023-01-02
    • 2010-10-09
    相关资源
    最近更新 更多