Chrome 浏览器自动填充导致黄色背景

按照以下给input增加样式

chrome的自动填充样式

  1. input:-webkit-autofill {
  2. background-color: #FAFFBD;
  3. background-image: none;
  4. color: #000;
  5. }


我们要改的:

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

-webkit-text-fill-color: #ededed !important;
  1. input:-webkit-autofill {
  2. -webkit-box-shadow: 0 0 0px 1000px white inset;
  3. border: 1px solid #CCC!important;
  4. }

2.圆角等样式

  1. input:-webkit-autofill {
  2. -webkit-box-shadow: 0 0 0px 1000px white inset;
  3. border: 1px solid #CCC!important;
  4. height: 27px!important;
  5. line-height: 27px!important;
  6. border-radius: 0 4px 4px 0;
  7. }

3.图片背景

  1. $(function() {
  2. if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
  3. $(window).load(function(){
  4. $('ul input:not(input[type=submit])').each(function(){
  5. var outHtml = this.outerHTML;
  6. $(this).append(outHtml);
  7. });
  8. });
  9. }
  10. });


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;  
} 


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页