覆盖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

仅使用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,并且只能覆盖基本(丑陋)错误面板。

问候。

我不知道为什么,但::-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); 

希望帮助别人 – 我到处寻找这个。

对于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 {}

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

Chrome HTML5电子邮件类型表单验证

然而,它似乎被包含在一个标准的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; } 

不幸的是,一些您想要更改的关键属性(如marginfont-weight )不能更改。

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

将类添加到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> 

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

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