去掉谷歌浏览器输入框默认的黄色背景

谷歌浏览器登录页记住密码后下次登录会自动填充，并且有黄色背景。

谷歌浏览器的设置如下：

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {

1. background-color: rgb(250, 255, 189);
2. background-image: none;
3. color: rgb(0, 0, 0);

}

去掉黄色背景第一种方法是对它重写样式，使用!important提升优先级，除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级。

1. input:-webkit-autofill {
2. -webkit-box-shadow: 0 0 0px 1000px white inset;  //使用足够大的纯色内阴影覆盖黄色背景
3. border: 1px solid #CCC!important;
4. }

试了上面的方法，如果input内有图片，会将前面的图标一起遮罩。

 

第二种方法使用jquery判断是否为谷歌浏览器，然后遍历该元素，通过取值，附加，移除实现：

$(function() {
   if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
      $(window).load(function(){
         $('input:not(input[type=submit])').each(function(){
         var outHtml = this.outerHTML;
         $(this).append(outHtml);
         });
      });
   }
});