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

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

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

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

如果您需要这些内容的完整参考，请访问

---

另外，如果我的回答有误，我很抱歉，我是这个社区的新手。

目前，没有办法设计这些小验证工具提示的样式。唯一的另一个选择，也就是我选择要做的，就是现在一起禁用浏览器验证，并依赖于我自己的客户端验证脚本

根据这篇文章：

---

“选择退出的最简单方法是将novalidate属性添加到您的

中。您还可以在提交控件上设置formnovalidate。

Chrome为其验证错误提供了本机外观。错误气泡由四个包含非规范性元素的元素组成。这四个元素可通过应用于气泡单独部分的伪元素进行设置：

::-webkit-validation-bubble

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

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message 

---

---

更新：此方法已过时。

对于Google Chrome，无法再设置验证消息的样式：

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

 input:invalid { 
border:solid red;
}

---

有关更多信息

此答案（与所有其他答案一样）似乎忽略了问题。问题不在于如何根据表单输入的验证状态设置其样式。问题是如何设置浏览器显示的错误消息的样式，例如在Chrome中的“请填写此字段”。这里已经回答了这个问题：它目前只在Chrome中工作。Chrome的验证错误气泡对我来说不是天生的。它们看起来很难看（在Chrome 15之前）。将其设置为显示：无崩溃Chrome我已经为崩溃打开了一个bug，看看你是否关心在Firefox上修复此问题，请对该bug进行投票：似乎此解决方案已停止使用Blink:另一个参考：