chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
来源:互联网 发布:linux识别中文字体 编辑:程序博客网 时间:2024/06/05 04:40
很多朋友都遇到这个问题:当使用chrome浏览器表单自动填充时都会自动添加默认的样式.发现该问题的原因-是在写账号登录页面时,input表单添加了背景图片,当自动填充,搓搓的一坨淡黄色背景出来。如果把这个图标放在input表单外面,就不会出现这个问题。通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:
<span style="font-family:SimSun;font-size:14px;">input:-webkit-autofill {background-color: #FAFFBD;background-image: none;color: #000;}</span>
在有些情况下,这个黄色的背景会影响到我们界面的效果,尤其是在我们给input文本框使用图片背景的时候,原来的圆角和边框都被覆盖了:
思路有两个,1、通过打补丁,修复bug。2、关闭浏览器自带填充表单功能
思路一:打补丁
情景一:input文本框是纯色背景的
可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景;如:
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;border: 1px solid #CCC!important;}
如果你有使用圆角等属性,或者发现输入框的长度高度不太对,可以对其进行调整,除了chrome默认定义的background-color,background-image,color不能用!important提升其优先级以外,其他的属性均可使用!important提升其优先级,如:
<span style="font-family:SimSun;font-size:14px;">input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;border: 1px solid #CCC!important;height: 27px!important;line-height: 27px!important;border-radius: 0 4px 4px 0;}</span>
情景二:input文本框是使用图片背景的
这个比较麻烦,目前还没找到完美的解决方法,有两种选择:
1、如果你的图片背景不太复杂,只有一些简单的内阴影,那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景,此时只不过是没有了原来的内阴影效果罢了。
2、如果你实在想留住原来的内阴影效果,那就只能牺牲chrome自动填充表单的功能,使用js去实现,例如:
<span style="font-family:SimSun;font-size:14px;">$(function() {if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {$(window).load(function(){$('ul input:not(input[type=submit])').each(function(){var outHtml = this.outerHTML;$(this).append(outHtml);});});}});</span>
3.如果不想多去处理chrome浏览器下表单自动填充出现的添加默认样式,那就把这个小小的图标放到表单外面吧,我这个因为是input框
只有border-bottom,如果这个input框有边框,那么可能需要使用一个div的边框的来假装成input框的边框,然后input框弄成是没有边框的。
思路二: 关闭浏览器自带填充表单功能
设置表单属性 autocomplete="off/on" 关闭自动填充表单,自己实现记住密码
<!-- 对整个表单设置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或对单一元素设置 -->
<input type="text" name="textboxname" autocomplete="off">
0 0
- chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
- 当表单自动填充_去除chrome浏览器自动添加的默认样式
- 去除chrome浏览器自动添加的默认样式
- chrome浏览器表单自动填充默认样式-autofill
- 如何去除Chrome浏览器表单文本框Input自动填充黄色背景色样式?
- Chrome浏览器自动填充的表单如何去掉淡黄色背景???
- chrome浏览器自动填充表单导致输入框样式改变
- 禁止chrome浏览器自动填充到表单
- 禁止chrome浏览器自动填充表单的解决方案
- css去除chrome浏览器输入框默认样式填充及chrome浏览器滚动条样式设置
- 屏蔽浏览器自动填充样式
- 浏览器自动填充表单导致网页样式丢失
- 解决chrome浏览器表单自动填充导致input文本框背景变成偏黄色的问题
- 【修改谷歌浏览器chrome记住密码后自动填充表单的黄色背景】
- 禁止用户选择文字,更改浏览器滚动条样式,去除浏览器自动填充背景
- 去除浏览器账号信息自动填充
- Chrome表单如何去掉默认的淡黄色背景及如何关闭浏览器自带填充表单功能?
- 解决chrome浏览器自动填充密码
- 每日安全简讯20160728
- 字符串的逆序输出
- java去除字符串中的空格、回车、换行符、制表符
- App第三方登录和分享开发的那些坑
- HashTable和HashMap区别
- chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
- 传引用&传值
- Halcon腐蚀膨胀算子
- 排序算法
- 使用PipedInputStream 和 PipedOutputStream 上传文件,并更新进度
- 【Servlet开发】servlet的请求与响应(二)
- mybatis注解详解
- hdu 4474 bfs
- java 路径分隔符