你如何设置HTML5表单验证消息的样式？

Question

假设你有这样的HTML：

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

由于required属性，较新的Webkits和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，它允许您更改错误消息的文本，这是您可以使用CSS和-webkit-validation-bubble-message在Chrome中执行的操作。详细了解x-moz-errormessage on the MDN Docs page。

截至目前，Firefox无法设置错误气泡的样式。

Answer 2

你需要使用更具体的选择器来处理其他我害怕的事情。身体＆gt; div等。