你如何设置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"样式表控件"trac页面.

另外,firefox支持元素属性x-moz-errormessage,它允许您更改错误消息的文本,这是您可以使用CSS和-webkit-validation-bubble-message在Chrome中执行的操作.在MDN文档页面上查看有关x-moz-errormessage的更多信息.

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