如何在 Firefox 中设置 HTML5 验证错误样式答案

【问题标题】：How do I style HTML5 validation errors in Firefox如何在 Firefox 中设置 HTML5 验证错误样式
【发布时间】：2012-09-05 17:00:50
【问题描述】：

我已经阅读了无数文章，但我仍然没有找到一种方法来设置 Firefox 中的 HTML5 验证错误的样式。有没有人有这个运气？我已经能够在 Chrome 和 IE 中设置一些漂亮的消息样式（在 IE 中使用 Webshims）。

我不喜欢 Firefox 中消息的外观（见屏幕截图）。 This link 听起来并不乐观。 this one 也没有。但是，这些链接有点陈旧。我希望有人已经为较新版本的 Firefox 解决了这个问题（我使用的是 14.0.1 版）。

【问题讨论】：

【解决方案1】：

答案是……没有答案？我继续搜索，但我仍然看不到在 Firefox 中设置这些错误样式的方法。然而，好消息是最新版本的 Firefox (16.0.1) 已经清理了提示的外观，并移除了丑陋的内部矩形（见截图）。不过，用自定义颜色设计这些样式会很好；例如，可能是深色背景上的白色文本。

【讨论】：

【解决方案2】：

我不确定我是怎么到这里的，这似乎是一个旧线程。但只是为了确保任何通过的人都能得到正确的（最新的）答案：

CSS样式错误可以通过伪选择器:invalid来完成

因此，对于 Firefox 错误框，您可以使用以下命令将其删除：

input[type="number"]:invalid {box-shadow: none;}

【讨论】：

【解决方案3】：

目前我认为我们无法设计工具提示。您可以为您的表单使用 novalidate 属性并创建您的自定义工具提示。

【讨论】：

我已经阅读了这个问题，它在处理带有 webkit-validation...css 类的 Chrome 方面做得很好。它不涉及 Firefox。这就是我向this answer 发表评论的原因。