?在開(kāi)發(fā)后臺(tái)管理系統(tǒng)網(wǎng)站時(shí)堪夭，在webkit內(nèi)核和谷歌瀏覽器里訪問(wèn)網(wǎng)頁(yè)中的表單時(shí)廷支，記住密碼的表單文本框背景色會(huì)自動(dòng)填充為黃色剩蟀，如下圖。本文將介紹解決該問(wèn)題的兩種方式苦酱。
通過(guò)檢查元素會(huì)發(fā)現(xiàn)售貌，webkit內(nèi)核的瀏覽器的表單存在以下默認(rèn)樣式：
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;
}
如果直接通過(guò)css覆蓋該樣式给猾，會(huì)發(fā)現(xiàn)沒(méi)有效果疫萤。瀏覽器依舊會(huì)使用該默認(rèn)樣式。
解決方法：
1.通過(guò)陰影覆蓋黃色背景敢伸，使用足夠大的純白色陰影效果覆蓋黃色背景扯饶，代碼如下
input:-webkit-autofill {
????-webkit-box-shadow: 0 0 0 1000px white inset;
????border: 1px solid #fff!important;
????border-bottom: 1px solid #f0f0f0!important;
}
2.使用漸變效果
第一點(diǎn)的方法雖然可以解決該問(wèn)題，但如果你設(shè)置了輸入框的邊框顏色池颈，會(huì)發(fā)現(xiàn)輸入框在剛進(jìn)入頁(yè)面的一瞬間存在邊框?yàn)楹谏那闆r尾序。所以最好使用時(shí)間足夠長(zhǎng)的漸變效果解決該問(wè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;
}
