你如何设计HTML5表单验证信息？ [英] How do you style the HTML5 form validation messages?

问题描述

假设你有这样的HTML：

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

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

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

  div {
字体：Helvetica; 
} 
  

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

（JSFiddle表明它们可以用一个div选择器： http://jsfiddle.net/p7kK5 ）

<解决方案

更新：Chrome不允许使用样式表单验证泡泡： https://code.google.com/p/chromium/issues/detail?id=259050

在Chrome的最新版本中，为这些伪选择器添加了支持，即：

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

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

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

到目前为止，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

In the latest iterations of Chrome, support has been added for pseudo selectors for these, namely;

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

For more information on these, check out the Webkit "Styling Form Controls" trac page.

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表单验证信息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！