你如何deviseHTML5表单validation信息?

假设你有这样的一些HTML:

<form> <input placeholder="Some text!" required> <input type="email" placeholder="An Email!" required> <input type="submit" value="A Button!"> </form> 

由于required属性,如果您将其留空,则较新的Webkit和Firefox将在该字段旁边显示validation消息。

他们回应被规则如下:

 div { font: Helvetica; } 

但是我找不到更具体的select器。 有谁知道什么select器使用,或将被使用,甚至是一个错误报告的WebKit /壁虎有关呢?

(JSFiddle显示它们可以使用divselect器进行样式化: http : //jsfiddle.net/p7kK5/ )

更新: Chrome不允许造型表单validation泡泡: https : //code.google.com/p/chromium/issues/detail? id = 259050

在Chrome的最新版本中,为这些伪select器添加了支持,即:

 ::-webkit-validation-bubble{} ::-webkit-validation-bubble-top-outer-arrow{} ::-webkit-validation-bubble-top-inner-arrow{} ::-webkit-validation-bubble-message{} 

有关这些的更多信息,请查看Webkit“样式表单控件”trac页面 。

另外,firefox支持元素属性x-moz-errormessage,它使您能够更改错误消息的文本,这是您可以在Chrome中使用CSS和-webkit-validation-bubble-message进行的操作。 在MDN Docs页面上查看更多关于x-moz-errormessage的信息 。

到目前为止,Firefox无法设置错误的气泡。

您需要使用更具体的select器来处理所有其他的内容。body> div等