【修改谷歌瀏覽器chrome記住密碼後自動填充表單的黃色背景】
chrome 表單自動填充後,input文字框的背景會變成黃色的,通過審查元素可以看到這是由於chrome會預設給自動填充的input表單加上input:-webkit-autofill私有屬性,然後對其賦予以下樣式:
input : -webkit-autofill {
background-color : #FAFFBD ;
background-image : none ;
color : #000 ;
}
在有些情況下,這個黃色的背景會影響到我們介面的效果,尤其是在我們給input文字框使用圖片背景的時候,原來的圓角和邊框都被覆蓋了:
情景一:input文字框是純色背景
可以對input:-webkit-autofill使用足夠大的純色內陰影來覆蓋input輸入框的黃色背景;如:
input : -webkit-autofill {
-webkit-box-shadow : 0 0 0px 1000px white inset ;
border : 1px solid #CCC !important ;
}
如果你有使用圓角等屬性,或者發現輸輸入框的長度高度不太對,可以對其進行調整,除了chrome預設定義的background-color,background-image,color不能用!important提升其優先順序以外,其他的屬性均可使用!important提升其優先順序,如:
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文字框是使用圖片背景
這個比較麻煩,目前還沒找到完美的解決方法,有兩種選擇:
1、如果你實在想留住原來的內陰影效果,那就只能犧牲chrome自動填充表單的功能,使用 js 去實現,例如:
$ ( 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 );
});
});
}
});
遍歷的物件可能要根據你的需求去調整。如果你不想使用js,好吧,在form標籤上直接關閉了表單的自動填充功能:autocomplete="off"。
上面是在網上找到的一些方法,我是用的圖片背景,經過實驗如果用js的方法會導致提交表單的時候重置而無法將value傳過去,沒辦法只能是將自動填充的功能關閉了,雖然影響了部分使用者的體驗,但是解決了黃色背景影響整體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);
});
});
}