chrome表单自动填充导致input文本框背景变成偏黄色问题解决


chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:

复制代码
代码如下:

input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}

在有些情况下,这个黄色的背景会影响到我们界面的效果,尤其是在我们给input文本框使用图片背景的时候,原来的圆角和边框都被覆盖了:
 
情景一: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提升其优先级,如:

复制代码
代码如下:

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;
}

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

这个比较麻烦,目前还没找到完美的解决方法,有两种选择:
1、如果你的图片背景不太复杂,只有一些简单的内阴影,那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景,此时只不过是没有了原来的内阴影效果罢了。
2、如果你实在想留住原来的内阴影效果,那就只能牺牲chrome自动填充表单的功能,使用js去实现,例如:

复制代码
代码如下:

$(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);
});
});
}
10.});

遍历的对象可能要根据你的需求去调整。如果你不想使用js,好吧,在form标签上直接关闭了表单的自动填充功能:autocomplete=”off”。

关于网上盛传的方法不奏效的一些测试

这个问题困扰了我挺长一段时间的,网上写的方法主要有2种:第一种是在样式里对input:-webkit-autofill重写background-color和color,使用!important提高其优先级。第二种是使用jquery,先判断是否是chrome,如果是,则遍历input:-webkit-autofill元素,再通过取值,附加,移除等操作来实现。

但是我测试发现,这两种方法都不凑效!不知道是随着chrome版本的升级,现在的chrome(27)已经不支持重写input:-webkit-autofill原有的属性,还是怎么回事。另外js也无法获取到chrome自动填充的表单的value值,所以网上盛传的使用jquery解决的方法也是不凑效,最多也就只能去掉黄色背景,而自动填充的value却被移除了。chrome自动填充的表单的value值是存在DocumentFragment里的div中的,如果有哪位童鞋知道怎么获取chrome自动填充的表单的value值,还请指教一下。



相关阅读:
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
学习php中的正则表达式
Marvell网卡win10下无法联网的解决方法
在android开发中进行数据存储与访问的多种方式介绍
java 函数的重载和重写实例代码
浅谈php正则表达式中的非贪婪模式匹配的使用
PHP的时间戳与具体时间转化的简单实现
C++中的重载、覆盖、隐藏介绍
(图)全新windows 10 Build 10074泄露
node.js中的fs.fsyncSync方法使用说明
PHP无限分类(树形类)
浅析Java的Spring框架中IOC容器容器的应用
史上最详细的js日期正则表达式分享
试用php中oci8扩展
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 徐州-尚志 沙城-下花园 开通-晏城 苏州-同心 宾阳-保定东 贺州-容县 呼和浩特-衡水 丰城南-河源 东安东-东至 安庆沟-马林 泰和-阳泉北 盘锦北-丹东 草市-廊坊北 徐州-吐哈 诸暨-开封北 包头-太原南 烟台-潼关 治山-小岭 烟台-长沙 江宁-廊坊 开封-吉安 大板-好鲁库 石门县北-卫辉 巩义南-枣庄 宜春-婺源 泗阳-东台 施秉-青溪 卫辉-渑池 樟树东-宜昌东 通辽-化德 南宁-崇左 和硕-清水 炎陵-石林 彰武-兴城 滁州北-项城 泾川-六盘山 嘉峪关-焉耆 松桃-彭水 亚布力-徐州 汉口-河源 上海虹桥-繁昌西 安阳东-郑州西 新民-祁县 扶余北-沧州西 郑州-古田 千阳-史家铺 冯屯-长春 吴桥-阿城 泉水-偏岭 当阳-渭南 陇县-马兰 弯道-高头 唐山北-双城北 四方台-五龙背 七营-大战场 兴城-潢川 天津-上海 宁陵县-沂水 子长-米脂 泗水-沂南 株洲西-珠海 绵阳-汉源 潍坊-滦县 宣汉-库车 乐山-双流机场 六枝-东乡 乌鲁木齐南-阿克陶 魏杖子-金杖子 黄石-土贵乌拉 阎良-张桥 太平川-迁安 益阳-樟树 歙县-蚌埠 呼和浩特东-武威 遂溪-梧州 延安-北京西 密山西-齐齐哈尔 渡市-渠县 达州-正镶白旗 达日其嘎-宝木吐 北戴河到秦皇岛的列车,八点至十点有几辆啊
1521次火车11车003号下铺和005号下铺在一间吗
宅急送可以送货到江门市棠下镇大林村吗?
我是成都的大学生,暑假想和一个朋友去峨眉山,我们从成都到
轩辕剑五“一剑凌云山海情”值得玩吗?
上海白莲泾客车站到海门的长途客车能带宠物吗
从南京到菏泽的火车列车经为滕州吗
星沙的韩仙居一般消费是多少?
枣庄市市中区C1驾驶证6年到期去哪里换证具体地址。
现在买赣州-蘇州的列车票提前几天可以购买
从南京到阜阳要多久停在阜阳哪个车站
申通物流从上海发的快件号是888060247769的快件到哪里了
我在阳朔想开淘宝,但是找不到快递公司。圆通申通那些都不来
东莞东列车火车站到松山湖科技园怎么走
金坛到盐城一天有几班车票价钱数多少
请问从广州大学城来到中山骑自行车怎样走
广州天河电脑城到苏州吴中区的物流公司
请问东莞列车站有没有直达永州或是经过永州的列车
澄海到莲花峰怎么去
从上海虹桥机场怎么到乌镇最方便快捷,然后从乌镇怎么到上海
电脑---快递---从南京到太原啊
恒山旅游
从大王古去天津列车站
重庆坐车到庆元怎么坐车
从东莞大朗到四川达州市开江县有哪些物流公司
济南东岳中华汽车客车销售S店,是家黑店,他太会欺骗消费者了。我
上海到福建沙县的汽车急
1122次火车汽车_1122次火车火车
西安培华学院和西安翻译学院离的远么?
关于列车火车票K651桂林北至成都

Copyright © 2016 phpStudy |