【Web】解决Chome内核浏览器中input自动填值背景为黄色-最终方案

场景:比如谷歌浏览器、QQ浏览器 均为Chome内核,input自动填充时背景为黄色,火狐、IE等浏览器并无此问题

解决方法1:仅仅针对纯色背景可行,原理:使用阴影将背景掩盖

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1px #0096e6 inset;
    border: 1px solid #CCC !important;
}

备注:0 0 0 1px #0096e6 inset;

将1px改为大于等于你的文本框即可,通常>20px已经基本够用

将#0096e6改为你的背景色。

所谓的把背景设置为透明 transparent 是没有任何效果的,此处的透明是阴影的透明,最终还是黄色背景。

解决方法2:针对有背景图片的、可以强制关闭input的autocomplete属性

<input id="loginName" autocomplete="off" name="username" class="text" style="color: #FFFFFF !important" type="text" placeholder="账号">

并不希望关闭其他内核浏览器的自动填充效果、可以这么做

$(function() {
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
            $(window).load(function() {
                $('input:not(input[type=submit])').each(function() {
                    $(this).attr("autocomplete","off");//autocomplete="off"
                });
            });
        }
    });

这样、就能很好的解决这个问题,最希望的效果是能让这个背景透明,继续探索吧。

原文地址:https://www.cnblogs.com/flydkPocketMagic/p/7244560.html