Google Chrome表单自动填充及其黄色背景

Question

我对Google Chrome及其表单自动填充功能存在设计问题.如果Chrome记住某些登录名/密码,则会将背景颜色更改为黄色.

以下是一些截图:

如何删除该背景或只是禁用此自动填充？

Answer 1

将"白色"更改为您想要的任何颜色.

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

Answer 2

如果你们想要透明的输入字段,你可以使用转换和转换延迟.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

Answer 3

解决方案在这里:

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

Answer 4

在Firefox中,您可以使用autocomplete ="off/on"属性禁用表单上的所有自动填充.同样,可以使用相同的属性设置单个项目自动完成.

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

你可以在Chrome中测试它,因为它应该工作.

Answer 5

如果要保留自动填充,以及附加到输入元素的任何数据,附加处理程序和功能,请尝试以下脚本:

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

它会轮询直到找到任何自动填充元素,克隆它们包括数据和事件,然后将它们插入到同一位置的DOM中并删除原始元素.一旦找到要克隆的任何内容,它就会停止轮询,因为自动填充有时会在页面加载后花费一秒钟.这是先前代码示例的变体,但更加健壮并且尽可能保持尽可能多的功能.

(确认在Chrome,Firefox和IE 8中工作.)

Answer 6

以下CSS删除黄色背景颜色,并将其替换为您选择的背景颜色.它不会禁用自动填充,它不需要jQuery或Javascript黑客攻击.

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

解决方案复制自: 使用HTML/CSS覆盖浏览器表单填充和输入突出显示

Answer 7

为我工作,只需要改变css.

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

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