文档章节

chrome表单自动填充去掉input黄色背景解决方案

花果山摸鱼高手
 花果山摸鱼高手
发布于 2015/11/08 22:48
字数 798
阅读 140
收藏 0

这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:

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

在有些情况下,这个黄色的背景会影响到我们界面的效果,尤其是在我们给input文本框使用图片背景的时候,原来的圆角和边框都被覆盖了:

10094547

情景一: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);          });      });  }});

遍历的对象可能要根据你的需求去调整。如果你不想使用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值,还请指教一下。


本文转载自:

花果山摸鱼高手
粉丝 1
博文 4
码字总数 4244
作品 0
成都
网页/平面设计
私信 提问
chrome表单自动填充导致input文本框背景变成偏黄色问题解决

chrome表单自动填充后,input文本框的背景会变成偏黄色的,想必大家都会碰到这种情况吧,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性造成的,解决方法如下...

freedonn
2014/08/07
570
0
CSS填坑代码大全

文字溢出省略号显示 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 文字换行 /强制不换行/white-space:nowrap;/自动换行/word-wrap: break-word;word-break: normal;/强......

ITer在路上
2015/10/08
106
0
解决浏览器保存密码自动填充问题

解决浏览器保存密码自动填充问题 问题描述 话说有一天,我如往常一样打开我的开发网站进行登录操作。浏览器很平常的在我们进行登录操作之后询问我是否需要记住密码,懒惰如我点击了记住密码。...

广州芦苇科技web前端
01/15
361
0
怎么去opera浏览器 input上的黄色丑框

今天用opera测试,发现name为 username和 password的input,都给我加了个黄色的边框,如果不用username和password命名input就没有,现在改input名字,有点麻烦; 用style="outline:none;" 能去...

小猫王
2013/02/25
1K
5
如何去除讨厌的Chrome自动填充黄色背景

前言 这个问题是老生常谈了, 但是之前一直没有找到一种很好的处理方式, 这次主要就是说明一下我见过的几种处理方式. 问题 我需要在如图的中完成自动填充, 但是又不希望出现Chrome的黄色背景 ...

LoveofRedMoon
02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

射频特征阻抗

Characteris Impendance(特性阻抗,也称为‘特征阻抗’)是我们经常看到并使用自己的术语之一,但非常模糊且难以解释。以下是来自几个不同来源的Characteris Impendance(特性阻抗)的一些定义。...

demyar
19分钟前
2
0
Spring Boot Tomcat配置项

参数配置容器 server.xx开头的是所有servlet容器通用的配置,server.tomcat.xx开头的是tomcat特有的参数,其它类似。 所有参数绑定配置类:org.springframework.boot.autoconfigure.web.Serv...

xiaomin0322
23分钟前
4
0
微课程 | 第二课《Docker 安装方式介绍》

微课程 | 第二课《Docker 安装方式介绍》视频 https://v.youku.com/v_show/id_XNDQ0NDUzNjkxNg==.html?spm=a2hzp.8244740.0.0 上一期我们介绍了 DBLE 的基本概况,下面进入我们的正题,正题基...

爱可生
23分钟前
4
0
GUAVA--基础工具(Preconditions)

1、前置条件 俗话说丑话讲在前面,在做某些事情的时候是需要做一些前置条件的。假如需要修改一条数据的话,当参数传进来,我们要先查询这条数据是否存在。这时候就需要一个if了,如果参数还需...

MrYuZixian
36分钟前
7
0
PythonSpot 中文系列教程 · 翻译完成

原文:PythonSpot Python Tutorials 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 在线阅读 ApacheCN 学习资源 目录 PythonSpot 中文系列教...

ApacheCN_飞龙
45分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部