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

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

谷歌瀏覽器的設置如下：

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