css - 如何在 Firefox 中设置 HTML5 验证错误样式

Question

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

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

Firefox 中的 HTML5 验证消息

score 2 · Accepted Answer

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

在此处输入图像描述

score 1 · Accepted Answer

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

使用 CSS 样式化表单错误可以通过伪选择器完成:invalid

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

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

score -2 · Accepted Answer

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

3 回答 3