html5默認氣泡修改
默認的瀏覽器氣泡樣式：
谷歌瀏覽器
火狐瀏覽器
IE瀏覽器
在谷歌29版本之前可以使用偽元素進行修改：
::-webkit-validation-bubble 不過已被廢棄?。?！
新的解決方案：
效果圖：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>form</title> <style> .container{margin:100px;font-size:14px;position: relative;} .item{position: relative;width:250px;height:40px;margin-bottom: 10px;} input{width:250px;height:20px;line-height:20px;border-radius: 4px;border:1px solid #999;color:#999;margin-bottom:10px;padding:5px;position: absolute;left:66px;} input:focus{border:2px solid rgb(90,152,210);} .item label{position: absolute;left:0;top:5px;} input[type=submit]{height:30px;line-height:20px;position:absolute;left:0;background-color: rgb(90,152,210);color:#fff;width:60px;} .error-msg{ color: red; font-size: 12px; position: absolute; bottom: -8px; left: 65px; width: 329px; } </style></head><body> <div class="container"> <form action="#" id="form"> <div class="item"> <label for="username">用戶名</label> <input type="text" id="username" required pattern="^1[0-9]{10}$"> </div> <div class="item"> <label for="password">郵箱</label> <input type="email" id="email" required> </div> <input type="submit" value="提交" id="submit"> </form> </div> <script> function myui(form){ //阻止默認氣泡 form.addEventListener("invalid",function(e){ e.preventDefault(); },true) //注意要設置為true //當Event對象的cancelable為false時，表示沒有默認行為，這時即使有默認行為，調用 preventDefault也是不會起作用的 //驗證不通過，則阻止表單提交 form.addEventListener("submit",function(e){ if(!this.checkValidity()){ e.preventDefault(); } },true) //點擊提交觸發的事件 submit.addEventListener("click",function(e){ var invalids=form.querySelectorAll(":invalid"), errMsgs=form.querySelectorAll(".error-msg"), parent; //循環，清除掉上一次添加的所有錯誤信息 for(var i=0;i<errMsgs.length;i++){ errMsgs[i].parentNode.removeChild(errMsgs[i]); } //循環，添加新的錯誤信息 for(var i=0;i<invalids.length;i++){ parent=invalids[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 if(invalids.length>0){ invalids[0].focus(); } }) } myui(form); </script></body></html>總結
到此這篇關于html5默認氣泡修改的代碼詳解的文章就介紹到這了,更多相關html5默認氣泡修改內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持武林網！
新聞熱點
疑難解答
