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 相关文章推荐
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
JS中递归函数
Jun 17 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
浅谈手写node可读流之流动模式
Jun 01 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
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之COOKIE支持详解
2010/09/20 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
php微信开发之关注事件
2018/06/14 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
Python读写文件方法总结
2015/06/09 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
空指针到底是什么
2012/08/07 面试题
产品销售员岗位职责
2013/12/18 职场文书
公务员培训心得体会
2013/12/28 职场文书
个人求职自荐信范文
2014/06/20 职场文书
学校2014年度工作总结
2014/12/06 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
2016教师国培研修感言
2015/12/08 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL