我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。

以下是一些截图:

如何删除背景或只是禁用这个自动填充?


当前回答

那解决方案呢:

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

它会关闭自动完成和自动填充(因此黄色背景消失),等待100毫秒,然后在没有自动填充的情况下将自动完成功能恢复。

如果你有需要自动填充的输入,那么给它们一个自动完成的css类。

其他回答

为我工作,只有css更改需要。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

你可以用任何颜色代替#ffffff。

我也有同样的问题。这对我来说很管用:

form :focus {
  outline: none;
}

最终解决方案:

$(document).ready(function(){
    var contadorInterval = 0;
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
    {
        var _interval = window.setInterval(function ()
        {
            var autofills = $('input:-webkit-autofill');
            if (autofills.length > 0)
            {
                window.clearInterval(_interval); // stop polling
                autofills.each(function()
                {
                    var clone = $(this).clone(true, true);
                    $(this).after(clone).remove();
                    setTimeout(function(){
//                        $("#User").val('');
                        $("#Password").val('');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('');
            $("#Password").val('');
        },100);
    }
});

这些答案的组合对我很管用

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>
<input type="text" name="foo" autocomplete="off" />

类似问题:Link