?在開發(fā)后臺管理系統(tǒng)網(wǎng)站時，在webkit內核和谷歌瀏覽器里訪問網(wǎng)頁中的表單時，記住密碼的表單文本框背景色會自動填充為黃色，如下圖。本文將介紹解決該問題的兩種方式。

chrome瀏覽器默認填充樣式

通過檢查元素會發(fā)現(xiàn)，webkit內核的瀏覽器的表單存在以下默認樣式：

input:-webkit-autofill,?textarea:-webkit-autofill, select:-webkit-autofill{

????background-color:?rgb(250, 255, 189)?!important;

????background-image:?none !important; color:?rgb(0, 0, 0)?!important;

}

如果直接通過css覆蓋該樣式，會發(fā)現(xiàn)沒有效果。瀏覽器依舊會使用該默認樣式。

解決方法：

1.通過陰影覆蓋黃色背景，使用足夠大的純白色陰影效果覆蓋黃色背景，代碼如下

input:-webkit-autofill {

????-webkit-box-shadow: 0 0 0 1000px white inset;

????border: 1px solid #fff!important;

????border-bottom: 1px solid #f0f0f0!important;

}

2.使用漸變效果

第一點的方法雖然可以解決該問題，但如果你設置了輸入框的邊框顏色，會發(fā)現(xiàn)輸入框在剛進入頁面的一瞬間存在邊框為黑色的情況。所以最好使用時間足夠長的漸變效果解決該問題

input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active{

????-webkit-transition-delay: 9999s;

????-webkit-transition: color 9999s ease-out, background-color 9999s ease-out;

}