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

<script type="text/javascript"> 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); }); }); } </script>

5.关闭自动填充

<form id="loginForm" method="post" autocomplete="off"> ...... </form>

6.亲测有效（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; }