chrome表單自動填充導致input文字框背景變成偏黃色問題

chrome表單自動填充後，input文字框的背景會變成偏黃色的，這是由於chrome會預設給自動填充的input表單加上 ** input:-webkit-autofill **私有屬性，然後對其賦予以下樣式：

 input:-webkit-autofill { 
  background-color: #FAFFBD; 
  background-image: none; 
  color: #000; 
} 

• input文字框是純色背景
  可以對input:-webkit-autofill使用足夠大的純色內陰影來覆蓋input輸入框的黃色背景

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

• 如果你有使用圓角等屬性，或者發現輸入框的長度高度不太對，可以對其進行調整，除了chrome預設定義的background-color，background-image，color不能用!important提升其優先順序以外，其他的屬性均可使用!important提升其優先順序

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  border: 1px solid #CCC!important;
  height: 27px!important;
  line-height: 27px!important;
  border-radius: 0 4px 4px 0;
}

2. input文字框是使用圖片背景的
   如果你實在想留住原來的內陰影效果，那就只能犧牲chrome自動填充表單的功能，使用js去實現

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

遍歷的物件可能要根據你的需求去調整。如果你不想使用js，好吧，在form標籤上直接關閉了表單的自動填充功能：** autocomplete=”off” **。