默认的浏览器气泡样式：
谷歌浏览器
火狐浏览器
IE浏览器
在谷歌29版本之前可以使用伪元素进行修改：
::-webkit-valIDation-bubble 不过已被废弃！！！
新的解决方案：
效果图：
<!DOCTYPE HTML><HTML lang="en"head> Meta charset="UTF-8"Title>form</style> .container{margin:100px;Font-size14pxposition relative} .itemwIDth250pxheight40pxmargin-bottom 10px input20pxline-heightborder-radius 4pxborder1px solID #999color#99910pxpadding5px absoluteleft66px input:focus2px solID rgb(90,152,210) .item label0top input[type=submit]30pxabsolutebackground-color rgb(90,1)">#fff60px .error-msg color red Font-size 12px position bottom -8px left 65px wIDth 329px; } bodydiv class="container"> form action="#" ID="form"> ="item"> label for="username">用户名labelinput type="text"="username" required pattern="^1[0-9]{10}$"div="password">邮箱="email" required="submit" value="提交"="submit"formscript> function myui(form){ //阻止默认气泡 form.addEventListener("invalID,(e){ e.preventDefault(); },1)">true) 注意要设置为true 当Event对象的cancelable为false时，表示没有默认行为，这时即使有默认行为，调用 preventDefault也是不会起作用的 验证不通过，则阻止表单提交submit(e){ if(!this.checkValIDity()){ e.preventDefault(); } },1)">) 点击提交触发的事件 submit.addEventListener(clickvar invalIDs=form.querySelectorAll(:invalID),errMsgs.error-msg循环，清除掉上一次添加的所有错误信息 for i;i<errMsgs.length;i++){ errMsgs[i].parentNode.removeChild(errMsgs[i]); } 循环，添加新的错误信息 invalIDs.length;i){ parentinvalIDs[i].parentNode; /* element.insertAdjacentHTML(position,text); beforebegin: 元素自身的前面。 afterbegin: 插入元素内部的第一个子节点之前。 beforeend: 插入元素内部的最后一个子节点之后。 afterend: 元素自身的后面。 text是要被解析为HTML或XML,并插入到DOM树中的字符串 */ parent.insertAdjacentHTML(beforeend<div class='error-msg'>+invalIDs[i].valIDationMessage</div>); } 如果存在错误信息，则给第一个错误信息一个focus (invalIDs.length){ invalIDs[].focus(); } }) } myui(form); HTML>
总结
以上是内存溢出为你收集整理的html5默认气泡修改全部内容，希望文章能够帮你解决html5默认气泡修改所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）