chrome 表單自動(dòng)填充后，input文本框的背景會(huì)變成黃色的，通過審查元素可以看到這是由于chrome會(huì)默認(rèn)給自動(dòng)填充的input表單加上input:-webkit-autofill私有屬性，然后對(duì)其賦予以下樣式：
input : -webkit-autofill {
? ? ? ? background-color : #FAFFBD ;
? ? ? ? background-image : none ;
? ? ? ? color : #000 ;
}
在有些情況下，這個(gè)黃色的背景會(huì)影響到我們界面的效果，尤其是在我們給input文本框使用圖片背景的時(shí)候，原來的圓角和邊框都被覆蓋了：
情景一：input文本框是純色背景
可以對(duì)input:-webkit-autofill使用足夠大的純色內(nèi)陰影來覆蓋input輸入框的黃色背景；如：
input : -webkit-autofill {
? ? ? ? -webkit-box-shadow : 0 0 0px 1000px white inset ;
? ? ? ? border : 1px solid #CCC !important ;
}
如果你有使用圓角等屬性，或者發(fā)現(xiàn)輸輸入框的長度高度不太對(duì)，可以對(duì)其進(jìn)行調(diào)整，除了chrome默認(rèn)定義的background-color，background-image，color不能用!important提升其優(yōu)先級(jí)以外，其他的屬性均可使用!important提升其優(yōu)先級(jí)，如：
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 ;
}
情景二：input文本框是使用圖片背景
這個(gè)比較麻煩，目前還沒找到完美的解決方法，有兩種選擇：
1、如果你實(shí)在想留住原來的內(nèi)陰影效果，那就只能犧牲c(diǎn)hrome自動(dòng)填充表單的功能，使用 js 去實(shí)現(xiàn)，例如：
$ ( 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 );
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? });
? ? ? ? }
});
遍歷的對(duì)象可能要根據(jù)你的需求去調(diào)整。如果你不想使用js，好吧，在form標(biāo)簽上直接關(guān)閉了表單的自動(dòng)填充功能：autocomplete="off"。
上面是在網(wǎng)上找到的一些方法，我是用的圖片背景，經(jīng)過實(shí)驗(yàn)如果用js的方法會(huì)導(dǎo)致提交表單的時(shí)候重置而無法將value傳過去，沒辦法只能是將自動(dòng)填充的功能關(guān)閉了，雖然影響了部分用戶的體驗(yàn)，但是解決了黃色背景影響整體UI的問題。
2、有背景圖片input表單
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
? ? ? ? $(window).load(function(){
? ? ? ? ? ? ? ? $('input:-webkit-autofill').each(function(){
? ? ? ? ? ? ? ? ? ? ? ? var text = $(this).val();
? ? ? ? ? ? ? ? ? ? ? ? var name = $(this).attr('name');
? ? ? ? ? ? ? ? ? ? ? ? $(this).after(this.outerHTML).remove();
? ? ? ? ? ? ? ? ? ? ? ? $('input[name=' + name + ']').val(text);
? ? ? ? ? ? ? ? });
? ? ? ? });
}
