覆盖HTML5表单validation/所需的popup窗口的CSS

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

例如： http : //jsfiddle.net/uKZGp/ （确保你点击提交button来查看popup窗口）

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来更改validation样式是不可能的。

它是浏览器的一部分。 我想通过使用这个例子来改变唯一的属性是错误信息：

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

但是，如本例所示： http : //jsfiddle.net/trixta/qTV3g/ ，您可以通过使用jQuery覆盖面板样式。 这不是一个插件，它是一个核心function，使用一个名为Webshims的DOM库，当然还有一些CSS来devisepopup窗口。

我发现这个错误发布标题为Improve form validation error panel UI非常有用的例子。

我认为这是您可以find的最好的解决scheme，并且只能覆盖基本（丑陋）错误面板。

问候。

Answer 2

我不知道为什么，但::-webkit-validation-bubble-message { display: none; } ::-webkit-validation-bubble-message { display: none; }不会为我工作。 通过防止无效事件的默认行为，我能够得到所需的结果（在FF 19，Chrome版本29.0.1547.76米testing）。

  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不允许造型表单validation泡泡： https ： //code.google.com/p/chromium/issues/detail？ id = 259050

对于Firefox，你可以尝试:-moz-placeholder {} 。

Answer 4

目前默认的电子邮件validation是目前我见过的Googledevise中最丑陋的事情之一！

然而，它似乎被包含在一个标准的div所以你可以做一些改变，如果你记得然后重置这些值。

我发现你可以改变背景，字体大小和颜色，边框和阴影，就像这样

 div { background: rgba(0,0,0,0.8); color: #333; font-size: 11px; border: 0; box-shadow: none; } 

如果你在html标签内覆盖了这些div，那么只有validation最终会受到影响。

 html div { background: rgba(0,0,0,1); color: #000; font-size: 12px; } 

不幸的是，一些您想要更改的关键属性（如margin和font-weight ）不能更改。

NB。 这项技术目前仅适用于Chrome（12），即不适用于Firefox 4，Opera 11或Safari（Win 7）。

Answer 5

将类添加到inputtypes。 并在那里显示消息。希望这有助于小定制。 工作codepen：

 document.querySelector('#frm').addEventListener('submit', e => { e.preventDefault(); e.currentTarget.classList.add('submitted'); }); 

 body { font-family: Helvetica, sans-serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; width: 100%; height: 100vh; background: #ffa500; } form > div { position: relative; margin-bottom: 10px; } .theTooltip { -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: opacity, visibility; max-width: 250px; border-radius: 5px; background-color: rgba(0,0,0,0.7); padding: 15px; color: #fff; box-sizing: border-box; display: inline-block; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate(15%, -50%); transform: translate(15%, -50%); top: 50%; left: auto; right: auto; bottom: auto; visibility: hidden; margin: 0; opacity: 0; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; z-index: 100; } .theTooltip:after { content: ''; position: absolute; width: 0; height: 0; top: 50%; margin-top: -10px; left: -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid rgba(0,0,0,0.7); } label { display: inline-block; vertical-align: center; } input { background: #fff; border: 1px solid transparent; cursor: pointer; display: inline-block; overflow: visible; margin: 0; outline: 0; vertical-align: center; text-decoration: none; width: auto; border-radius: 3px; cursor: text; padding: 7px; } input:focus, input:active { outline: none; } .submitted input:invalid { border: 1px solid #f00; } .submitted input:invalid ~ .theTooltip { visibility: visible; opacity: 1; } .submitted input:valid ~ .theTooltip { -webkit-transition: opacity 0.3s, visibility 0s 0.3s; transition: opacity 0.3s, visibility 0s 0.3s; } 

 <form id="frm" action="action"> <div> <label>Email</label> <input type="email" required="required"/><span class="theTooltip">Invalid email</span> </div> <div> <button formnovalidate="formnovalidate">OK</button> </div> </form> 

Answer 6

我知道这是一个相当古老的问题，但是我发现这个图书馆，我觉得这可能对其他人有好处。

http://afarkas.github.io/webshim/demos/index.html