chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式


Posted in Javascript onOctober 09, 2015

一、发现该问题的原因-是在写账号登录页面时,input表单添加了背景图片,当自动填充,搓搓的一坨淡黄色背景出来。

这个原因是我草率的直接设置在input元素里面,结果问题就来了。所以如果把这个图标放在input表单外面,就不会出现这个问题。

二、表单自动填充会添加浏览器默认样式怎么处理和避免

第二张图,就是表单自动填充后,chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: rgb(250, 255, 189); /* #FAFFBD; */
 background-image: none;
 color: rgb(0, 0, 0);
}

看到这里添加上这段代码,我会想到使用样式覆盖的方法解决。我完全可以使用!important去提升优先级。但是有个问题,加!important不能覆盖原有的背景、字体颜色,除了chrome默认定义background-color,background-images,color不能使用

!important提升优先级,其他属性均可使用它来提升优先级。

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: #FFFFFF;
 background-image: none;
 color: #333;
 /* -webkit-text-fill-color: red; //这个私有属性是有效的 */
}
input:-webkit-autofill:hover {
 /* style code */
}
input:-webkit-autofill:focus {
 /* style code */
}

思路有两个,1、通过打补丁,修复bug。2、关闭浏览器自带填充表单功能

情景一:input文本框是纯色背景的

解决办法:

input:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px white inset;
 -webkit-text-fill-color: #333;
}

情景二:input文本框是使用图片背景的

解决办法:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
 var _interval = window.setInterval(function () {
 var autofills = $('input:-webkit-autofill');
 if (autofills.length > 0) {
  window.clearInterval(_interval); // 停止轮询
  autofills.each(function() {
  var clone = $(this).clone(true, true);
  $(this).after(clone).remove();
  });
 }
 }, 20);
}

先判断是否是chrome,如果是,则遍历input:-webkit-autofill元素,再通过取值,附加,移除等操作来实现。 这个方法没效果!!

所以最后我是不使用图标作为input表单的背景图片,而是多写一个标签,把图标拿到表单外面来。

思路二: 关闭浏览器自带填充表单功能

设置表单属性 autocomplete="off/on" 关闭自动填充表单,自己实现记住密码

<!-- 对整个表单设置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或对单一元素设置 -->
<input type="text" name="textboxname" autocomplete="off">

如图:未自动填充前,此时这个邮箱的小图标是inpu表单的背景图片

chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式

如图:填充后,邮箱小图标被浏览器默认样式覆盖掉

chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式

最后,

如果不想多去处理chrome浏览器下表单自动填充出现的添加默认样式,那就把这个小小的图标放到表单外面吧,我这个因为是input框

只有border-bottom,如果这个input框有边框,那么可能需要使用一个div的边框的来假装成input框的边框,然后input框弄成是没有边框的。

像这样的input框

chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式

通过以上方法成功帮朋友解决浏览器自动添加默认样式问题,小伙伴们可以放心参考此文。

Javascript 相关文章推荐
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 #Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 #Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 #Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 #Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 #Javascript
jQuery实现连续动画效果实例分析
Oct 09 #Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 #Javascript
You might like
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python图片的横坐标汉字实例
2019/12/04 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
教师岗位职责范本
2013/12/29 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
给老婆的道歉信
2015/01/20 职场文书
客房领班岗位职责
2015/02/11 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
Python数组变形的几种实现方法
2022/05/30 Python