你如何设计HTML5表单验证信息？

问题描述

假设你有这样的HTML：

 < form> 
< input placeholder =一些文字！所需> 
< input type =emailplaceholder =电子邮件！所需> 
< input type =submitvalue =A Button！> 
< / form> 
  

由于需要属性，所以更新的Webkit如果您将该字段留空，Firefox将在该字段旁边显示一条验证消息。

它们会响应按以下规则进行样式设置：

  div {
字体：Helvetica; 
} 
  

但我找不到更具体的选择器。有谁知道什么选择器被使用，或将被使用，或者甚至是一个关于webkit / gecko的bug报告？

（JSFiddle表明它们可以用一个div选择器：）

更新：Chrome不允许使用样式表单验证泡泡：

此外，firefox支持元素属性x-moz-errormessage，它允许您更改错误消息的文本，是你可以在Chrome中使用CSS和-webkit-validation-bubble-message做的事情。详细了解。

到目前为止，Firefox无法设置错误信息。

Say you have some HTML like this:

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

Because of the required attributes, newer Webkits and Firefoxes show a validation message next to the field if you leave it blank.

They respond to being styled by a rule such as:

div {
    font: Helvetica;
}

But I can't find a more specific selector for them. Does anyone know what selector is used, or will be used, or even a bug report for webkit/gecko relating to this?

( JSFiddle showing that they can be styled with a div selector: http://jsfiddle.net/p7kK5/ )

解决方案

Update: Chrome does not allow styling form validation bubbles anymore: https://code.google.com/p/chromium/issues/detail?id=259050

Additionally, firefox has support for the element attribute x-moz-errormessage which enables you to change the text of the error message, which is something you could do in Chrome using CSS to and -webkit-validation-bubble-message. See more about x-moz-errormessage on the MDN Docs page.

As of yet, Firefox has no way to style the error bubbles.

这篇关于你如何设计HTML5表单验证信息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！