html5基本代码文字颜色(html5默认气泡修改的代码详解)
类别:Web前端 浏览量:1650
时间:2021-10-09 00:04:41 html5基本代码文字颜色
html5默认气泡修改的代码详解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> <li class="container"> <form action="#" id="form"> <li class="item"> <label for="username">用户名</label> <input type="text" id="username" required pattern="^1[0-9]{10}$"> </li> <li class="item"> <label for="password">邮箱</label> <input type="email" id="email" required> </li> <input type="submit" value="提交" id="submit"> </form> </li> <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","<li class='error-msg'>"+invalids[i].validationMessage+"</li>"); } //如果存在错误信息,则给第一个错误信息一个focus if(invalids.length>0){ invalids[0].focus(); } }) } myui(form); </script> </body> </html>
总结
到此这篇关于html5默认气泡修改的代码详解的文章就介绍到这了,更多相关html5默认气泡修改内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html5做app流程(Html5嵌入钉钉的实现示例)
- html5背景怎么变色(HTML5 背景的显示区域实现)
- h5打开小程序点允许(html5跳转小程序wx-open-launch-weapp踩坑)
- html5input标签的默认属性(移动端HTML5 input常见问题小结)
- html5做app流程(html5唤醒APP小记)
- 微信html隐藏功能(使用Html5多媒体实现微信语音功能)
- html5怎么设置倾斜(HTML5 body设置自适应全屏)
- html5如何使用svg(将SVG图引入到HTML页面的实现)
- js如何解决iphone异形屏适配(Html5适配iphoneX刘海屏的简单实现)
- html5的canvas图形绘制技术(导出HTML5 Canvas图片并上传服务器功能)
- html5导航栏跳转(Html5跳转到APP指定页面的实现)
- html5单选项怎么调选项间距(html5实现输入框fixed定位在屏幕最底部兼容性)
- html5长按动画效果(HTML5实现移动端弹幕动画效果)
- html5 canvas 特效(JavaScript canvas实现流星特效)
- 用于播放视频文件的html5元素(html5自动播放mov格式视频的实例代码)
- html5中datalist标签
- 嘉南传 第22集(嘉南传第22集)
- 哪版孙悟空最萌 黄渤躺萌了(哪版孙悟空最萌)
- 融入小人物的喜怒哀乐,黄渤饰演的角色为什么让人观看时欲罢不能(融入小人物的喜怒哀乐)
- 《极限挑战》深访都市夜归人,夜间打工者体验,黄磊录完憔悴了(极限挑战深访都市夜归人)
- Google 推出了一个游戏生成器,让不会编程的你也能自己设计游戏(推出了一个游戏生成器)
- 二胎家庭老大爱闹情绪,用这招很有效(二胎家庭老大爱闹情绪)
热门推荐
- 云服务器怎么免费(有永久免费的云服务器吗?)
- SQL Server Management Studio(SSMS)复制数据库的方法(SQL Server Management StudioSSMS复制数据库的方法)
- nginx配置https转发规则(Nginx配置https原理及实现过程详解)
- mysql常用的sql语句大全(mysql建表常用的sql语句汇总)
- oracle中rownum和row_number()
- 阿里云服务器加载镜像操作手册(阿里云、腾讯云、小鸟云服务器中安装wdcp图文教程)
- css背景的属性有哪些(简述CSS中的背景属性background)
- 如何租云服务器(云服务器也可以合租吗?)
- 怎么调input搜索框边框颜色(使用placeholder属性设置input文本框的提示信息)
- docker查看运行容器参数(Docker容器时区调整操作)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9