Question

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

Answer 1

目前，无法设置那些小验证工具提示的样式。我唯一选择的另一个选择是暂时禁用浏览器验证，并依赖我自己的客户端验证脚本。

“选择退出的最简单方法是将无效属性添加到<form>。您还可以在提交控件上设置 formnovalidate 。”< / p>

Answer 2

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

::-webkit-validation-bubble

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

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message

更新：此方法已过时。

Answer 3

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

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

如果您需要完整参考这些内容，请前往Mozilla's reference.

P.S。对不起，如果我做错了这些答案，我是这个社区的新手。

Answer 4

在输入正确的输入之前，必填字段无效。在输入文本之前，不需要但具有验证的字段（例如URL字段）将有效。

 input:invalid { 
border:solid red;
}

Answer 5

对于Google Chrome，无法再设置验证消息的样式：https://code.google.com/p/chromium/issues/detail?id=259050