html文字多了自动填充颜色,去除Chrome浏览器自动填充导致的黄色背景【亲测有效】...

做了一个网站后台，但是自动填充时候，看起来死丑！于是网上找了不少代码，很多都不管用，于是找到这篇文章的时候，试了一下，立马可以了。于是分享给大家！

按照以下给input增加样式

chrome的自动填充样式

input:-webkit-autofill {

background-color: #FAFFBD;

background-image: none;

color: #000;

}

我们要改的：

1.纯色背景，对字体颜色没作用，可加

-webkit-text-fill-color: #ededed !important;

input:-webkit-autofill {

-webkit-box-shadow: 0 0 0px 1000px white inset;

border: 1px solid #CCC!important;

}

2.圆角等样式

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;

}

3.图片背景

$(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);

});

});

}

});

4.js

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

$(window).load(function(){

$('input:-webkit-autofill').each(function(){

var text = $(this).val();

var userName = $(this).attr('userName');

$(this).after(this.outerHTML).remove();

$('input[userName=' + userName + ']').val(text);

});

});

}

5.关闭自动填充

......

6.css的做法让自动填充的黄色背景消失，亲测有效(2018年)重点！

input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {

-webkit-text-fill-color: #ededed !important;  //字体颜色

-webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;

background-color:transparent;

background-image: none;

transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间

}

input {

background-color:transparent;

}

做完之后，自动填充后再也没有那个难看的黄色背景了！