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

看到這里添加上這段代碼，我會(huì)想到使用樣式覆蓋的方法解決。我完全可以使用!important去提升優(yōu)先級(jí)。但是有個(gè)問(wèn)題，加！important不能覆蓋原有的背景、字體顏色，除了chrome默認(rèn)定義background-color,background-images,color不能使用

!important提升優(yōu)先級(jí)，其他屬性均可使用它來(lái)提升優(yōu)先級(jí)。

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 background-color: #FFFFFF;
 background-image: none;
 color: #333;
 /* -webkit-text-fill-color: red; //這個(gè)私有屬性是有效的 */
}
input:-webkit-autofill:hover {
 /* style code */
}
input:-webkit-autofill:focus {
 /* style code */
}

思路有兩個(gè)，1、通過(guò)打補(bǔ)丁，修復(fù)bug。2、關(guān)閉瀏覽器自帶填充表單功能

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

解決辦法：

input:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px white inset;
 -webkit-text-fill-color: #333;
}

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

解決辦法：

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

先判斷是否是chrome，如果是，則遍歷input:-webkit-autofill元素，再通過(guò)取值，附加，移除等操作來(lái)實(shí)現(xiàn)。這個(gè)方法沒(méi)效果！！

所以最后我是不使用圖標(biāo)作為input表單的背景圖片，而是多寫(xiě)一個(gè)標(biāo)簽，把圖標(biāo)拿到表單外面來(lái)。

思路二：關(guān)閉瀏覽器自帶填充表單功能

設(shè)置表單屬性 autocomplete="off/on" 關(guān)閉自動(dòng)填充表單，自己實(shí)現(xiàn)記住密碼

<form autocomplete="off" method=".." action="..">

<input type="text" name="textboxname" autocomplete="off">

如圖：未自動(dòng)填充前，此時(shí)這個(gè)郵箱的小圖標(biāo)是inpu表單的背景圖片