你如何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等