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

本文转载自：http://blog.csdn.net/wangxiaohui6687/article/details/10149579#t1

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

<ol class="linenums" style="padding:0px 0px 0px 40px; margin:0px; list-style-position:initial"><li class="L0" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="kwd" style="color:#73920;">input</span><span class="pun" style="color:#333333;">:</span><span class="pln" style="color:#333333;">-webkit-autofill </span><span class="pun" style="color:#333333;">{</span></li><li class="L1" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="kwd" style="color:#73920;">background-color</span><span class="pun" style="color:#333333;">:</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">#FAFFBD</span><span class="pun" style="color:#333333;">;</span></li><li class="L2" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="kwd" style="color:#73920;">background-image</span><span class="pun" style="color:#333333;">:</span><span class="pln" style="color:#333333;"> none</span><span class="pun" style="color:#333333;">;</span></li><li class="L3" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="kwd" style="color:#73920;">color</span><span class="pun" style="color:#333333;">:</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">#000</span><span class="pun" style="color:#333333;">;</span></li><li class="L4" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="pun" style="color:#333333;">}</span></li></ol>

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

情景一：input文本框是纯色背景的

可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景；如：

<ol class="linenums" style="padding:0px 0px 0px 40px; margin:0px; list-style-position:initial"><li class="L0" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="kwd" style="color:#73920;">input</span><span class="pun" style="color:#333333;">:</span><span class="pln" style="color:#333333;">-webkit-autofill </span><span class="pun" style="color:#333333;">{</span></li><li class="L1" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="kwd" style="color:#73920;">-webkit-box-shadow</span><span class="pun" style="color:#333333;">:</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">0</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">0</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">0px</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">1000px</span><span class="pln" style="color:#333333;"> white inset</span><span class="pun" style="color:#333333;">;</span></li><li class="L2" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="kwd" style="color:#73920;">border</span><span class="pun" style="color:#333333;">:</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">1px</span><span class="pln" style="color:#333333;"> solid </span><span class="lit" style="color:#158d8d;">#CCC</span><span class="kwd" style="color:#73920;">!important</span><span class="pun" style="color:#333333;">;</span></li><li class="L3" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="pun" style="color:#333333;">}</span></li></ol>

如果你有使用圆角等属性，或者发现输入框的长度高度不太对，可以对其进行调整，除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级，如：

<ol class="linenums" style="padding:0px 0px 0px 40px; margin:0px; list-style-position:initial"><li class="L0" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="kwd" style="color:#73920;">input</span><span class="pun" style="color:#333333;">:</span><span class="pln" style="color:#333333;">-webkit-autofill </span><span class="pun" style="color:#333333;">{</span></li><li class="L1" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="kwd" style="color:#73920;">-webkit-box-shadow</span><span class="pun" style="color:#333333;">:</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">0</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">0</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">0px</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">1000px</span><span class="pln" style="color:#333333;"> white inset</span><span class="pun" style="color:#333333;">;</span></li><li class="L2" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="kwd" style="color:#73920;">border</span><span class="pun" style="color:#333333;">:</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">1px</span><span class="pln" style="color:#333333;"> solid </span><span class="lit" style="color:#158d8d;">#CCC</span><span class="kwd" style="color:#73920;">!important</span><span class="pun" style="color:#333333;">;</span></li><li class="L3" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="kwd" style="color:#73920;">height</span><span class="pun" style="color:#333333;">:</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">27px</span><span class="kwd" style="color:#73920;">!important</span><span class="pun" style="color:#333333;">;</span></li><li class="L4" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="kwd" style="color:#73920;">line-height</span><span class="pun" style="color:#333333;">:</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">27px</span><span class="kwd" style="color:#73920;">!important</span><span class="pun" style="color:#333333;">;</span></li><li class="L5" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="kwd" style="color:#73920;">border-radius</span><span class="pun" style="color:#333333;">:</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">0</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">4px</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">4px</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">0</span><span class="pun" style="color:#333333;">;</span></li><li class="L6" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="pun" style="color:#333333;">}</span></li></ol>

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

这个比较麻烦，目前还没找到完美的解决方法，有两种选择：

1、如果你的图片背景不太复杂，只有一些简单的内阴影，那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景，此时只不过是没有了原来的内阴影效果罢了。

2、如果你实在想留住原来的内阴影效果，那就只能牺牲chrome自动填充表单的功能，使用js去实现，例如：

<ol class="linenums" style="padding:0px 0px 0px 40px; margin:0px; list-style-position:initial"><li class="L0" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="pln" style="color:#333333;">$</span><span class="pun" style="color:#333333;">(</span><span class="kwd" style="color:#73920;">function</span><span class="pun" style="color:#333333;">()</span><span class="pln" style="color:#333333;"> </span><span class="pun" style="color:#333333;">{</span></li><li class="L1" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="pln" style="color:#333333;">  </span><span class="kwd" style="color:#73920;">if</span><span class="pln" style="color:#333333;"> </span><span class="pun" style="color:#333333;">(</span><span class="pln" style="color:#333333;">navigator</span><span class="pun" style="color:#333333;">.</span><span class="pln" style="color:#333333;">userAgent</span><span class="pun" style="color:#333333;">.</span><span class="pln" style="color:#333333;">toLowerCase</span><span class="pun" style="color:#333333;">().</span><span class="pln" style="color:#333333;">indexOf</span><span class="pun" style="color:#333333;">(</span><span class="str" style="color:#dd1144;">"chrome"</span><span class="pun" style="color:#333333;">)</span><span class="pln" style="color:#333333;"> </span><span class="pun" style="color:#333333;">>=</span><span class="pln" style="color:#333333;"> </span><span class="lit" style="color:#158d8d;">0</span><span class="pun" style="color:#333333;">)</span><span class="pln" style="color:#333333;"> </span><span class="pun" style="color:#333333;">{</span></li><li class="L2" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="pln" style="color:#333333;">      $</span><span class="pun" style="color:#333333;">(</span><span class="pln" style="color:#333333;">window</span><span class="pun" style="color:#333333;">).</span><span class="pln" style="color:#333333;">load</span><span class="pun" style="color:#333333;">(</span><span class="kwd" style="color:#73920;">function</span><span class="pun" style="color:#333333;">(){</span></li><li class="L3" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="pln" style="color:#333333;">          $</span><span class="pun" style="color:#333333;">(</span><span class="str" style="color:#dd1144;">'ul input:not(input[type=submit])'</span><span class="pun" style="color:#333333;">).</span><span class="pln" style="color:#333333;">each</span><span class="pun" style="color:#333333;">(</span><span class="kwd" style="color:#73920;">function</span><span class="pun" style="color:#333333;">(){</span></li><li class="L4" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="pln" style="color:#333333;">              </span><span class="kwd" style="color:#73920;">var</span><span class="pln" style="color:#333333;"> outHtml </span><span class="pun" style="color:#333333;">=</span><span class="pln" style="color:#333333;"> </span><span class="kwd" style="color:#73920;">this</span><span class="pun" style="color:#333333;">.</span><span class="pln" style="color:#333333;">outerHTML</span><span class="pun" style="color:#333333;">;</span></li><li class="L5" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="pln" style="color:#333333;">              $</span><span class="pun" style="color:#333333;">(</span><span class="kwd" style="color:#73920;">this</span><span class="pun" style="color:#333333;">).</span><span class="pln" style="color:#333333;">append</span><span class="pun" style="color:#333333;">(</span><span class="pln" style="color:#333333;">outHtml</span><span class="pun" style="color:#333333;">);</span></li><li class="L6" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="pln" style="color:#333333;">          </span><span class="pun" style="color:#333333;">});</span></li><li class="L7" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="pln" style="color:#333333;">      </span><span class="pun" style="color:#333333;">});</span></li><li class="L8" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="pln" style="color:#333333;">  </span><span class="pun" style="color:#333333;">}</span></li><li class="L9" style="padding:0px 0px 0px 8px; margin:0px; list-style:decimal; line-height:1.5"><span class="pun" style="color:#333333;">});</span></li></ol>

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