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中新增的Input类型
- html5底部组件(HTML5 Blob对象的具体使用)
- html5创作(HTML5录音实践总结Preact)
- 用html5的canvas绘制剪裁图像(Html5 canvas画图白板踩坑)
- html5拖动效果怎么写(Html5 滚动穿透的方法)
- html5视频播放代码详解(HTML5基于flash实现播放RTMP协议视频的示例代码)
- html5中的语义化标签有哪些(详解HTML5常用的语义化标签)
- html5div怎样居中(HTML5+CSS设置浮动却没有动反而在中间且错行的问题)
- html5实现上传图片预览
- html5页面传值表(html5的pushstate以及监听浏览器返回事件的实现)
- html5表格设计(Html5饼图绘制实现统计图的方法)
- html5导入图片文件(HTML5 实现图片上传预处理功能)
- html5input标签的默认属性(移动端HTML5 input常见问题小结)
- html5列表与布局(HTML5逐步分析实现拖放功能的方法)
- html5隐藏数字(HTML5去掉输入框type为number时的上下箭头的实现方法)
- html5 video标签
- 清华大学难考吗(清华大学考研录取分数线)
- 观花盆栽佛肚竹盆景制作及养护(观花盆栽佛肚竹盆景制作及养护)
- 春天养佛肚竹,做好这几件事,叶绿根壮寓意好 越养越旺家(春天养佛肚竹做好这几件事)
- 律界衣品最好,时尚圈学识数高,41岁的Amal堪称现实版的傲骨贤妻(时尚圈学识数高)
- 刘智泰确认出演《Good Wife》 担纲男一号(刘智泰确认出演Good)
- 《傲骨之战》剧终 律政女魔头Diane,为什么是大女主天花板(傲骨之战剧终律政女魔头Diane)
热门推荐
- dedecms更新后设置空白(dedecms去掉当前位置栏目链接的方法)
- docker部署mysql并且自动启动(Docker 部署 Mysql8.0的方法示例)
- 国内优惠的云服务器租用多少钱(云服务器租用的价格怎么算?)
- dockertomcat运行参数设置(Docker Tomcat为何看不到访问界面)
- canvas心形水波(Canvas波浪花环的示例代码)
- navicat连接报错10038(解决Navicat for Mysql连接报错1251的问题连接失败)
- html5长图拖动(html5 拖拽及用 js 实现拖拽功能的示例代码)
- docker-compose部署实例(详解docker-compose速度太慢解决方式)
- dede如何联动筛选(dede 标签调用大全 dedecms 隔五行一个分割线等标签调用)
- dedecms搜索设置(织梦dedecms默认作者和默认来源修改方法)