覆盖html5表单验证/必需弹出窗口的CSS

Question

如何覆盖HTML5表单上必填字段的默认弹出窗口？

示例:http://jsfiddle.net/uKZGp/(确保单击"提交"按钮以查看弹出窗口)

HTML

<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>

注意:您必须使用Google Chrome或FireFox等HTML5浏览器进行查看.

这个链接并没有解决我的问题,但它可能会让某人在框外思考:

• http://www.the-art-of-web.com/html/html5-form-validation/
• http://adhockery.blogspot.com/2011/03/styling-with-html5-form-validation.html

Answer 1

仅使用HTML5/CSS3无法更改验证样式.

它是浏览器的一部分.我想要更改的唯一属性是使用此示例的错误消息:

 document.getElementById("name").setCustomValidity("Lorum Ipsum");

但是,如本示例所示:http://jsfiddle.net/trixta/qTV3g/,您可以使用jQuery覆盖面板样式.这不是一个插件,它是一个核心功能,使用一个名为Webshims的DOM库,当然还有一些CSS来设置弹出窗口的样式.

我在这篇标题为bug的帖子中找到了非常有用的例子Improve form validation error panel UI.

我认为这是您可以找到的最佳解决方案,并且只能覆盖基本(丑陋)错误面板.

问候.

Answer 2

我不知道为什么,但::-webkit-validation-bubble-message { display: none; }对我不起作用.通过防止无效事件的默认行为,我得到了所需的结果(在FF 19,Chrome版本29.0.1547.76 m中测试).

  document.addEventListener('invalid', (function(){
      return function(e){
          //prevent the browser from showing default error bubble/ hint
          e.preventDefault();
          // optionally fire off some custom validation handler
          // myvalidationfunction();
      };
  })(), true);

希望能帮助别人 - 我到处寻找这个.

Answer 3

对于webkit,您可以使用::-webkit-validation-bubble-message.例如隐藏它:

::-webkit-validation-bubble-message { display: none; }

还有:

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

更新: Chrome不再允许样式表格验证泡泡:https://code.google.com/p/chromium/issues/detail？ id = 259050

对于Firefox,你可以试验:-moz-placeholder {}.