您如何设置 HTML5 表单验证消息的样式? [英] How do you style the HTML5 form validation messages?

问题描述

假设你有一些这样的 HTML:

Say you have some HTML like this:

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

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

Because of the required attributes, newer Webkits and Firefoxes show a validation message next to the field if you leave it blank.

他们会根据以下规则设置样式:

They respond to being styled by a rule such as:

div {
    font: Helvetica;
}

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

But I can't find a more specific selector for them. Does anyone know what selector is used, or will be used, or even a bug report for webkit/gecko relating to this?

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

( JSFiddle showing that they can be styled with a div selector: http://jsfiddle.net/p7kK5/ )

推荐答案

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

Update: Chrome does not allow styling form validation bubbles anymore: https://code.google.com/p/chromium/issues/detail?id=259050

在 Chrome 的最新版本中，添加了对这些伪选择器的支持，即；

In the latest iterations of Chrome, support has been added for pseudo selectors for these, namely;

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

有关这些的更多信息，请查看 Webkit样式表单控件"跟踪页面.

For more information on these, check out the Webkit "Styling Form Controls" trac page.

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

Additionally, firefox has support for the element attribute x-moz-errormessage which enables you to change the text of the error message, which is something you could do in Chrome using CSS to and -webkit-validation-bubble-message. See more about x-moz-errormessage on the MDN Docs page.

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

As of yet, Firefox has no way to style the error bubbles.

这篇关于您如何设置 HTML5 表单验证消息的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！