解决谷歌浏览器记住密码后输入框背景变成黄色问题

CSS解决Chrome自动填充颜色问题

转载于 2018-10-28 20:53:00 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vicF/p/9867089.html

文章标签：

#javascript #ViewUI

本文介绍如何使用CSS代码解决Chrome浏览器自动填充表单时背景颜色改变的问题，通过设置过渡效果和使用JavaScript来彻底避免颜色变化，适用于前端开发者。

在css中加入如下代码，让浏览器颜色过5000秒后再变

:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
}

正常情况下按上述方法即可解决，如果还是不能解决

可在head标签中加入如下代码，彻底解决

<script type="text/javascript">
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
            $(window).load(function(){
                $('input:-webkit-autofill').each(function(){
                    var text = $(this).val();
                    var name = $(this).attr('name');
                    $(this).after(this.outerHTML).remove();
                    $('input[name=' + name + ']').val(text);
                });
            });
        }
</script>

文末小福利免费视频资源网站（搜索猴）：www.sousuohou.com

转载于:https://www.cnblogs.com/vicF/p/9867089.html