您如何设置 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 和 Firefox 会在该字段旁边显示一条验证消息。

它们会响应以下规则的样式：

div {
    font: Helvetica;
}

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

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

Answer 1

更新： Chrome 不再允许对表单验证气泡进行样式设置：https://code.google.com/p/chromium/issues/detail?id=259050

在最新的 Chrome 迭代中，添加了对伪选择器的支持，即；

::-webkit-validation-bubble{}
::-webkit-validation-bubble-top-outer-arrow{}
::-webkit-validation-bubble-top-inner-arrow{}
::-webkit-validation-bubble-message{}

有关这些的更多信息，请查看Webkit "Styling Form Controls" trac page。

此外，firefox 还支持元素属性 x-moz-errormessage，它使您能够更改错误消息的文本，这是您可以在 Chrome 中使用 CSS 和 -webkit-validation-bubble-message 执行的操作。查看更多关于x-moz-errormessage on the MDN Docs page的信息。

到目前为止，Firefox 无法设置错误气泡的样式。

Answer 2

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