去掉谷歌瀏覽器輸入框默認的黃色背景

谷歌瀏覽器登陸頁記住密碼後下次登陸會自動填充，而且有黃色背景。

谷歌瀏覽器的設置以下：

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);         });      });   }});