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

以下是一些截图:

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


当前回答

对我来说唯一有效的解决方法是:

:-webkit-autofill {
  -webkit-text-fill-color: #000; /* ok for text, no hack */
  transition-property: background-color; /* begin hack for background... */
  transition-delay: 100000s; /* ...end hack for background */
}

这个解决方案并不理想,还在等待更好的…

其他回答

这是杰森的MooTools版本。修复它在Safari也。

window.addEvent('domready',function() { 
    $('username').focus();

    if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
    {

        var _interval = window.setInterval(function ()
        {
            var autofills = $$('input:-webkit-autofill');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,'after');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});
<input type="text" name="foo" autocomplete="off" />

类似问题:Link

对我来说唯一有效的解决方法是:

:-webkit-autofill {
  -webkit-text-fill-color: #000; /* ok for text, no hack */
  transition-property: background-color; /* begin hack for background... */
  transition-delay: 100000s; /* ...end hack for background */
}

这个解决方案并不理想,还在等待更好的…

如果你想完全摆脱它,我已经在之前的回答中调整了代码,使它在悬停,激活和聚焦时也能工作:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

最终解决方案:

$(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);
    }
});