chrome私有的:-webkit-autofill属性自动填充的input黄色背景解决方案！

通过form表单提交后的的input\textarea会出现黄色背景，如下图

在某些情况下，我们往往不需要这种颜色，或者觉得这个颜色和我们的网站主题不符合，需要更换为自定义颜色或带有图片的背景！

注意：通过覆盖chrome的私有样式是无效的！比如chrome的私有样式如下：

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
}

有人尝试使用覆盖去替代原有样式,如下面的做法编写相同的样式去覆盖，这样做是无效的。

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: #fff !improtant;
    background-image: url("...") !improtant;
    color: #444 !improtant;
}

解决办法：

既然没有办法做到覆盖，但是有办法可以进行扩展，比如利用足够大的纯色内阴影来覆盖input输入框的黄色背景

input:-webkit-autofill {
box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #444!important;
}

设置表单属性 autocomplete=”off/on” 关闭自动填充表单，自己实现记住密码

<!--整个表单-->
<form autocomplete="off">
<!--单个控件-->
<input type="text"  autocomplete="off">

使用js轮循遍历
使用时注意和其他的表单验证控件发生冲突

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
  var _interval = window.setInterval(function () {
    var autofills = $('input:-webkit-autofill');
    if (autofills.length > 0) {
      window.clearInterval(_interval); 
      autofills.each(function() {
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
      });
    }
  }, 20);
}