事實是，並不能一勞永逸去除谷歌在自動填充表單時的預設樣式。對於瀏覽器工具自動新增的樣式，這裡採取算是一種比較怪異的方法。除非你關閉它的表單自動填充功能，那姑且這篇文章可以不看了。
　　
　　今天在寫賬號登入頁面時，給input表單添加了背景圖片和圖示，看起來小清新了不少。可是當用chrome登入自動填充，淡黃色輸入框代替了背景樣式，看起來有些怪異。

在自動填充之後，chrome自動填充的樣式如下圖（空白部分背景沒有加上）：
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　
　　按照以往使用各種外掛經驗::>_<:: ，嗯，應該可以用！important提升優先順序之後覆蓋掉瀏覽器的預設樣式吧。事實上，這種方式在使用外掛的時候想要改變某些屬性雖然屢試不爽，但是在這裡是不行的。顯然瀏覽器預設新增的樣式優先順序更高。

　　這裡介紹這種方法不算太麻煩，對於有圖示的輸入框也同樣適用。侷限性是輸入框背景必須是純色的。

這裡是更改完之後的樣式：

來一個簡單點的程式碼：

這是原本的表單及樣式，自動填充樣式很怪異。
html

<form>
    <input type="text" name="telno" placeholder="請輸入手機號" />
    <input type="password" name="pwd" placeholder="請輸入密碼" />
</form>

css

form input{
    display
 
: block;
    width: 355px;
    height: 57px;
    margin-bottom: 30px;
    border: 0;
    padding-left: 60px;
    outline:none
}
form{
    input:first {
          background: url('@{imgBaseUrl}/input-account.png') no-repeat;
    }
    input:last {
          background: url('@{imgBaseUrl}/input-pwd.png') no-repeat
 
;
}

解決方法：
　　方法還是那種，覆蓋掉原本的樣式。但是谷歌的預設樣式三個屬性是不能更改的，所以只能從別的地方下手。

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {                 　　background-color: #FFFFFF;  
　　background-image: none;  
　　color: #333; 
} 

　 ^_^。首先在input外套一個div塊，將原來input的樣式更改到外層div上，所以背景和圖片也都加在了外層元素中。這樣背景和圖示有了，可是剩下的input單獨顯示一片蛋黃，好像更醜了。
html

<form id="merchant-login">
    <div class = "clear_auto" id = "clear_auto">
        <input type="text" name="account" placeholder="請輸入手機號" />
    </div>
    <div class = "clear_auto">
        <input type="password" name="pwd" placeholder="請輸入密碼" />
    </div>
</form>

　　所以再對內層的input標籤進行樣式的更改。邊框設為0，高度和行高設為與父元素也就是外層div都相等（這裡我加了margin並且高度比原來小2px是因為原本的背景包含邊框各1px）。接下來是針對谷歌自動填充的樣式了，屬性前加私有字首僅對谷歌生效：
　　-webkit-box-shadow: 0 0 0px 1000px #d3d3d3 inset; 盒子陰影屬性，設定盒子內陰影顏色，用取色器取原來背景色，1000px直接覆蓋掉原來的背景，網上有很多工具，可以自己搜一下。
　　-webkit-text-fill-color: #000; 設定文字顏色為黑，這個不多說。
　　
　　多說一句：first和：last偽元素選擇器，因為加了div之後，兩個input框不屬於同一個父元素，因此兩個分開要在父元素下寫。

less程式碼：

form .clear_auto {
    display: block;
    width: 267px;
    height: 45px;
    margin-bottom: 30px;
    border: 0;
    padding-left: 60px;
    outline: none;
    input {
        border: 0;
        height: 43px;
        line-height: 43px;
        outline: none;
        background-color: transparent;
        margin-top: 1px;
    }   
}
form {
    .clear_auto: nth-child(1){
        background: url('@{imgBaseUrl}/input-account.png') no-repeat;
        input: -webkit-autofill {  
            -webkit-box-shadow: 0 0 0px 1000px #d3d3d3 inset;
            -webkit-text-fill-color: #000;
        }
    }
    .clear_auto:nth-child(2) {
        background: url('@{imgBaseUrl}/input-pwd.png') no-repeat;
        input: -webkit-autofill {  
            -webkit-box-shadow: 0 0 0px 1000px #DBD7D4 inset;
            -webkit-text-fill-color: #000;
        }
    }
}

所以，對於背景色為純色的表單，這種解決方案，親測，完美。

更多精彩內容請訪問：前端部落格