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

Question

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

score 11 · Accepted Answer

目前，没有办法为这些小验证工具提示设置样式。我选择做的唯一其他选择是暂时禁用浏览器验证并依赖我自己的客户端验证脚本。

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

score 5 · Accepted Answer

更新：此方法已过时。

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

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

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message

score 3 · Accepted Answer

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

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

如果您需要这些的完整参考，请前往Mozilla 的参考。

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

score 1 · Accepted Answer

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

 input:invalid { 
border:solid red;
}

4 回答 4