chrome表单自动填充去掉input黄色背景解决方案
来源:互联网 发布:知乎 法国街头 编辑:程序博客网 时间:2024/06/06 02:52
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:000px1000px white inset;
- border:1px solid#CCC!important;
- }
如果你有使用圆角等属性,或者发现输入框的长度高度不太对,可以对其进行调整,除了chrome默认定义的background-color,background-image,color不能用!important提升其优先级以外,其他的属性均可使用!important提升其优先级,如:
- input:-webkit-autofill{
- -webkit-box-shadow:000px1000px white inset;
- border:1px solid#CCC!important;
- height:27px!important;
- line-height:27px!important;
- border-radius:04px4px0;
- }
情景二: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);
- });
- });
- }
- });
遍历的对象可能要根据你的需求去调整。如果你不想使用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值,还请指教一下。
原文地址:http://blog.csdn.net/wangxiaohui6687/article/details/10149579
- chrome表单自动填充去掉input黄色背景解决方案
- chrome表单自动填充去掉input黄色背景解决方案
- chrome表单自动填充去掉input黄色背景解决方案
- 取消chrome表单自动填充去掉input黄色背景解决方案
- chrome表单自动填充去掉input黄色背景解决方案
- chrome表单自动填充去掉input黄色背景解决方案
- chrome表单自动填充input黄色背景解决方案
- <开发>chrome表单自动填充后,去掉黄色背景
- 去掉chrome记住密码后自动填充表单的黄色背景
- 去掉chrome记住密码后自动填充表单的黄色背景
- 去掉chrome记住密码后自动填充表单的黄色背景
- 解决chrome浏览器表单自动填充导致input文本框背景变成偏黄色的问题
- input输入框自动填充黄色背景解决方案
- 关于chrome表单input的黄色背景重置的解决方案
- 去掉chrome默认input黄色背景
- Chrome浏览器自动填充的表单如何去掉淡黄色背景???
- (前端开发)input标签在chrome下自动填充变成黄色背景的解决方法
- 如何去除Chrome浏览器表单文本框Input自动填充黄色背景色样式?
- android接入京东开普勒
- python语音朗读
- react native 与服务器交互坑
- 几个美国娱乐业公司
- sqlplus 显示上一条命令及可用退格键
- chrome表单自动填充去掉input黄色背景解决方案
- 【Scikit-Learn 中文文档】处理文本数据
- Spring源码追踪1——doGetBean(为什么org.springframework.data.redis.core.RedisTemplate的实例可以注入为ListOperations)
- C语言中的free函数
- LeetCode刷题 | 738. Monotone Increasing Digits
- java语言实现单链表
- Linux内核学习实践之红外驱动分析—RCA38KHz软解码
- 用maven命令生成项目骨架
- tcp backlog