如何使用CSS样式化HTML表单验证错误信息？

Question

我该如何使用CSS样式来美化HTML表单验证错误信息？

- Kyle

Answer 1

目前，还没有办法对那些小的验证提示框进行样式设置。另外一个选项是禁用浏览器验证并依靠自己的客户端验证脚本，这也是我选择的方法。

根据这篇文章：http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4

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

- Ramin

---

另一个参考链接：https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/Form_validation#Customized_error_messages - 1.21 gigawatts

Answer 2

目前还没有实现这个的方法。

Chrome在版本27之前提供了本地化的验证错误气泡的外观和感觉。错误气泡由四个包含元素组成，这些元素不是规范元素。这四个元素可以通过伪元素进行样式设置，应用于气泡的不同部分：

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

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message 

随着Chrome v28的发布，他们移除了这些非标准选择器：https://bugs.chromium.org/p/chromium/issues/detail?id=259050

- Estelle

---

Chrome的验证错误气泡看起来对我来说不太自然。它们看起来很丑（在Chrome 15之前）。 - XP1

将这些设置为display:none会导致Chrome崩溃。 - Peter Ehrlich

我已经为崩溃问题开了一个 bug，请参见 http://code.google.com/p/chromium/issues/detail?id=117746 - Ronny

如果您关心在Firefox上修复此问题，请在错误页面进行投票：https://bugzilla.mozilla.org/show_bug.cgi?id=845405 - Robin Winslow

Answer 3

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

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

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

- Remixz

---

此答案（与其他所有答案一样）似乎没回答问题。问题不是如何根据表单验证状态设置表单输入样式，而是如何设置浏览器显示的错误消息的样式，例如在Chrome中显示的“请填写此字段”。 - Phrogz

Answer 4

如果输入不正确，必填字段将无效。对于不是必填字段但需要验证的字段（例如URL字段），只有在输入文本后才会有效。

 input:invalid { 
border:solid red;
}

欲了解更多信息，请参考http://msdn.microsoft.com/en-us/library/ie/hh772367(v=vs.85).aspx。

- GANI

---

这样可以为 输入框 添加样式，而不是为 验证信息 添加样式。 - Quentin