今天小编跟大家讲解下有关chrome表单自动填充导致input文本框背景变成偏黄色问题解决 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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值 还请指教一下。来源：爱蒂网
