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

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

2011-03-16 Kyle

这已经在这里找到答案： http://stackoverflow.com/questions/5713405/how-do-you-style-the-html5-form-validation-messages/5965505＃5965505目前只适用于Chrome。 – Ben 2011-06-17 05:25:32

使用伪选择器，正如easwee所说。例如，为了使表单元素绿色有效时，红色无效时，做这样的事情：

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

如果你需要它们的完整参考，头Mozilla's reference.

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

来源

2011-03-29 22:01:41 Remixz

+18

这个答案（与所有其他人一样）似乎错过了这个问题。问题不在于如何根据验证状态设置表单输入的样式。问题是如何设置浏览器显示的错误消息的样式，例如_“请在Chrome中填写此字段。”。 – Phrogz 2011-04-28 03:46:46

目前，没有办法对那些小验证工具提示进行样式设计。唯一的选择是我选择做的事情，就是现在停用浏览器验证，并依赖我自己的客户端验证脚本。

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

“退出的最简单的方法是将NOVALIDATE属性添加到您的<form>您还可以设置您提交控制formnovalidate。”

来源

2011-05-20 13:54:31 Ramin

Chrome为验证错误演示泡沫提供了本机外观和感觉。错误泡泡由四个不是规范元素的包含元素组成。这四个要素通过适用于该气泡的分离的部分伪元素是风格化：

::-webkit-validation-bubble 

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

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message

更新：此方法已过时。

来源

2011-07-02 08:15:59 Estelle

Chrome的验证错误气泡不看原产于我。他们看起来很丑陋（在Chrome 15之前）。 – XP1 2011-09-11 10:41:27

这些设置为显示：没有崩溃，我开了一个错误的崩溃铬 – 2012-02-04 07:35:12

，看到http://code.google.com/p/chromium/issues/detail?id=117746 – Ronny 2012-03-11 21:35:01

谷歌浏览器，这是不可能的款式验证消息更多：直到输入正确的输入https://code.google.com/p/chromium/issues/detail?id=259050

来源

2013-10-09 20:35:29 Udi

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

input:invalid { 
border:solid red; 
}

来源

2014-05-01 19:00:21 GANI

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

回答

相关问题