如何使用CSS设置HTML5表单验证错误消息的样式？

Question

Answer 1

目前,没有办法设置那些小验证工具提示.唯一的另一个选择,就是我选择做的,是暂时禁用浏览器验证,并依赖我自己的客户端验证脚本.

"选择退出的最简单方法是向您添加novalidate属性<form>.您还可以在提交控件上设置formnovalidate."

Answer 2

更新：此方法已过时。

Chrome 为其验证错误气泡提供了原生外观。错误气泡由四个非规范元素的包含元素组成。这四个元素可以通过应用于气泡不同部分的伪元素来设置样式：

::-webkit-validation-bubble
 
::-webkit-validation-bubble-arrow-clipper 

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message

似乎此解决方案已停止与 Blink 一起使用：https://code.google.com/p/chromium/issues/detail?id=259050 (4认同)

Answer 3

使用伪选择器，如 easwee 所说。例如，要使表单元素在有效时变为绿色，在无效时变为红色，请执行以下操作：

:invalid {
    background: #ffdddd;
         }
:valid{
      background:#ddffdd;
      }

如果您需要这些的完整参考，请前往Mozilla 开发者网络

这个答案（与所有其他答案一样）似乎错过了这个问题。问题不在于如何根据表单输入的验证状态设置其样式。问题是如何设计浏览器显示的错误消息的样式，例如 Chrome 中的_“请填写此字段。”_。 (29认同)