chrome瀏覽器當表單自動填充時，怎么去除瀏覽器自動添加的默認樣式。

參考blog來自 http://segmentfault.com/q/1010000000671971

 

chrome瀏覽器當表單自動填充時，怎么去除瀏覽器自動添加的默認樣式。

一、發現該問題的原因-是在寫賬號登錄頁面時，input表單添加了背景圖片，當自動填充，搓搓的一坨淡黃色背景出來。

這個原因是我草率的直接設置在input元素里面，結果問題就來了。所以如果把這個圖標放在input表單外面，就不會出現這個問題。

 

二、表單自動填充會添加瀏覽器默認樣式怎么處理和避免

第二張圖，就是表單自動填充后，chrome會默認給自動填充的input表單加上input:-webkit-autofill私有屬性

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

 

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

!important提升優先級，其他屬性均可使用它來提升優先級。

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

 

思路有兩個，1、通過打補丁，修復bug。2、關閉瀏覽器自帶填充表單功能

情景一：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); // 停止輪詢
      autofills.each(function() {
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
      });
    }
  }, 20);
}

先判斷是否是chrome，如果是，則遍歷input:-webkit-autofill元素，再通過取值，附加，移除等操作來實現。 這個方法沒效果！！

所以最后我是不使用圖標作為input表單的背景圖片，而是多寫一個標簽，把圖標拿到表單外面來。

思路二： 關閉瀏覽器自帶填充表單功能

設置表單屬性 autocomplete="off/on" 關閉自動填充表單，自己實現記住密碼

<!-- 對整個表單設置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或對單一元素設置 -->
<input type="text" name="textboxname" autocomplete="off">

 

 

如圖：未自動填充前，此時這個郵箱的小圖標是inpu表單的背景圖片

 

如圖：填充后，郵箱小圖標被瀏覽器默認樣式覆蓋掉

最后，

如果不想多去處理chrome瀏覽器下表單自動填充出現的添加默認樣式，那就把這個小小的圖標放到表單外面吧，我這個因為是input框

只有border-bottom，如果這個input框有邊框，那么可能需要使用一個div的邊框的來假裝成input框的邊框，然后input框弄成是沒有邊框的。

像這樣的input框