如何设置 HTML5 表单验证消息的样式？ [重复]

Question

假设你有这样的 HTML：

<form>
    <input placeholder="Some text!" required>
    <input type="email" placeholder="An Email!" required>
    <input type="submit" value="A Button!">
</form>

由于

required

属性，如果您将其留空，较新的 Webkit 和 Firefoxes 会在该字段旁边显示一条验证消息。

他们对以下规则的样式做出反应：

div {
    font: Helvetica;
}

但是我找不到更具体的选择器。有谁知道使用了什么选择器，或者将使用什么选择器，甚至是与此相关的 webkit/gecko 的错误报告？

（JSFiddle 显示它们可以使用 div 选择器设置样式：http://jsfiddle.net/p7kK5/）

Answer 1

Chrome 不再允许样式化表单验证气泡：https://code.google.com/p/chromium/issues/detail?id=259050

此外，Firefox 还支持元素属性

x-moz-errormessage

，它使您能够更改错误消息的文本，这是您可以在 Chrome 中使用 CSS 和

-webkit-validation-bubble-message

执行的操作。在 MDN 文档页面上查看有关

x-moz-errormessage

的更多信息.

到目前为止，Firefox 还没有办法设置错误气泡的样式。

Answer 2

恐怕您需要为其他所有内容使用更具体的选择器.. body > div 等