Html 如何使用 CSS 设置 HTML5 表单验证错误消息的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5328883/
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 I style the HTML5 form validation error messages with CSS?
提问by Kyle
How do I style the HTML5 form validation error messages with CSS?
如何使用 CSS 设置 HTML5 表单验证错误消息的样式？
回答by Ramin
Currently, there is no way to style those little validation tooltips. The only other option, which is what I have chosen to do, is to disable the browser validation all together for now and rely on my own client-side validation scripts.
目前，没有办法设置这些小的验证工具提示的样式。我选择做的唯一其他选择是暂时禁用浏览器验证并依赖我自己的客户端验证脚本。
According to this article: http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4
根据这篇文章：http: //blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4
"The simplest way to opt out is to add the novalidateattribute to your <form>. You can also set formnovalidateon your submit controls."
“选择退出的最简单方法是将novalidate属性添加到您的<form>。您还可以在提交控件上设置formnovalidate。”
回答by Estelle
Chrome provides a native look and feel for their validation error speach bubbles. The error bubble is made up of four containing elements that are not normative elements. These four elements are stylable via pseudo-elements that apply to separate sections of the bubble:
Chrome 为其验证错误气泡提供了原生外观。错误气泡由四个非规范元素的包含元素组成。这四个元素可以通过应用于气泡不同部分的伪元素来设置样式：
::-webkit-validation-bubble
::-webkit-validation-bubble-arrow-clipper
::-webkit-validation-bubble-arrow
::-webkit-validation-bubble-message
Update:This method is obsolete.
更新：此方法已过时。
回答by Remixz
Use pseudo selectors, as easwee said. For example, to make the form element green when valid, and red when invalid, do something like this:
正如 easwee 所说，使用伪选择器。例如，要使表单元素在有效时为绿色，无效时为红色，请执行以下操作：
:invalid {
background: #ffdddd;
}
:valid{
background:#ddffdd;
}
If you need a full reference of these, head to Mozilla's reference.
如果您需要这些的完整参考，请前往Mozilla 的参考。
P.S. Sorry if I'm doing these answers wrong, I'm new to this community.
PS对不起，如果我做错了这些答案，我是这个社区的新手。
回答by GANI
A required field will be invalid until the correct input is entered. A field that isn't required but has validation, such as a URL field, will be valid until text is entered.
在输入正确的输入之前，必填字段将无效。不需要但经过验证的字段（例如 URL 字段）在输入文本之前一直有效。
input:invalid {
border:solid red;
}
for more info http://msdn.microsoft.com/en-us/library/ie/hh772367(v=vs.85).aspx
更多信息http://msdn.microsoft.com/en-us/library/ie/hh772367(v=vs.85).aspx
回答by Udi
For Google Chrome, it is not possible to style validation messages any more: https://code.google.com/p/chromium/issues/detail?id=259050
对于 Google Chrome，无法再设置验证消息的样式：https: //code.google.com/p/chromium/issues/detail?id=259050
