你如何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/ )

2 Solutions collect form web for “你如何deviseHTML5表单validation信息?”

更新: 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等

  • 符合HTML5的HTMLfilter
  • HTML5本地存储中的项目何时到期?
  • HTML5 - localStorage删除并清除所有数据
  • 以编程方式更改img标签的src
  • HTML5 localStorage是否是asynchronous的?
  • CSS宽度与宽度相同
  • _gaq.push()如何工作?
  • HTML / Javascript:如何访问使用src设置的脚本标记中加载的JSON数据
  • 我应该在<nav> s中使用<ul>和<li>吗?
  • 禁用HTML5表单元素的validation
  • 名称=“”的无效表单控件不可聚焦