背景:chrome表单自动填充后,input文本框的背景会变成黄色,原因在于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}
应用情景一:文本框时纯色背景时
解决方法:给input:-webkit-autofill设置足够大的纯色内阴影来覆盖input输入框的黄色背景,如:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
border: 1px solid #CCC!important;
}
应用情景二:文本框使用图片作为背景或是整体页面背景是透明时
解决方法:目前没有完美的解决方法,如果你实在想保留文本框的背景图片、阴影、透明等样式,此时需要牺牲chrome自动填充表单的功能,用JS方法实现,如:
$(function() {
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {//解決谷歌瀏覽器中表單默認填充的黃色背景
$(window).load(function(){
$('input:not(input[type=submit])').each(function(){
var outHtml = this.outerHTML;
$(this).append(outHtml);
});
});
}
});
还可以加上autocomplete=”off”属性,但此时所有浏览器都是去了自动填充功能!