Html 您如何设置 HTML5 表单验证消息的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5713405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you style the HTML5 form validation messages?
提问by Rich Bradshaw
Say you have some HTML like this:
假设你有一些这样的 HTML：
<form>
<input placeholder="Some text!" required>
<input type="email" placeholder="An Email!" required>
<input type="submit" value="A Button!">
</form>
Because of the requiredattributes, newer Webkits and Firefoxes show a validation message next to the field if you leave it blank.
由于这些required属性，如果您将其留空，较新的 Webkit 和 Firefox 会在该字段旁边显示一条验证消息。
They respond to being styled by a rule such as:
他们对被规则的风格做出反应，例如：
div {
font: Helvetica;
}
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?
但我找不到更具体的选择器。有谁知道使用或将使用什么选择器，甚至与此相关的 webkit/gecko 的错误报告？
( JSFiddle showing that they can be styled with a div selector: http://jsfiddle.net/p7kK5/)
（ JSFiddle 显示它们可以使用 div 选择器设置样式：http: //jsfiddle.net/p7kK5/）
回答by Keithamus
Update:Chrome does not allow styling form validation bubbles anymore: https://code.google.com/p/chromium/issues/detail?id=259050
更新：Chrome 不再允许样式化表单验证气泡：https: //code.google.com/p/chromium/issues/detail?id =259050
In the latest iterations of Chrome, support has been added for pseudo selectors for these, namely;
在 Chrome 的最新版本中，增加了对这些伪选择器的支持，即；
::-webkit-validation-bubble{}
::-webkit-validation-bubble-top-outer-arrow{}
::-webkit-validation-bubble-top-inner-arrow{}
::-webkit-validation-bubble-message{}
::-webkit-validation-bubble{}
::-webkit-validation-bubble-top-outer-arrow{}
::-webkit-validation-bubble-top-inner-arrow{}
::-webkit-validation-bubble-message{}
For more information on these, check out the Webkit "Styling Form Controls" trac page.
有关这些的更多信息，请查看Webkit“样式表单控件”跟踪页面。
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 支持元素属性 x-moz-errormessage，它使您能够更改错误消息的文本，这是您可以在 Chrome 中使用 CSS to 和 -webkit-validation-bubble-message 执行的操作。在 MDN 文档页面上查看更多关于x-moz-errormessage 的信息。
As of yet, Firefox has no way to style the error bubbles.
到目前为止，Firefox 无法设置错误气泡的样式。
回答by Sheldon
You'll need to use more specific selectors for everything else I'm afraid.. body > div etc.
恐怕您需要为其他所有内容使用更具体的选择器.. body > div 等。
