chrome表單自動填充后,input文本框的背景會變成偏黃色的,這是由于chrome會默認給自動填充的input表單加上 ** input:-webkit-autofill **私有屬性,然后對其賦予以下樣式:
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}
- input文本框是純色背景
可以對input:-webkit-autofill使用足夠大的純色內陰影來覆蓋input輸入框的黃色背景
input:-webkit-autofill{
-webkit-box-shadow:0 0 0 1000px white inset;
border:1px soldi #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文本框是使用圖片背景的
如果你實在想留住原來的內陰影效果,那就只能犧牲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” **。