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

245

我对Google Chrome浏览器及其表单自动填充功能存在设计问题。如果Chrome记住了一些登录名/密码，它将背景色更改为黄色。

以下是一些屏幕截图：

替代文字 替代文字

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

html  css  forms  google-chrome  autofill 
— z
source
4
我也想看看是否有答案。
— 凯尔（Kyle）2010年
12
对于样式而言，这种颜色可以与设计元素一起使用，例如Chrome中输入标签中的轮廓线，我更想更改颜色而不是将其关闭。
— 凯尔（Kyle）2010年
3
Google似乎在某种程度上承认了这个问题。请参阅code.google.com/p/chromium/issues/detail?id=46543
— MitMaro 2010年
1
要禁用自动完成功能，可以将autocomplete =“ off”添加到您的输入元素，例如<input type =“ text” id =“ input” autocomplete =“ off”>
— joe_young 2014年
1
只是一个额外的信息：当我有密码字段时，我为此而感到痛苦。我的字段自动突出显示（黄色），并充满了奇怪的价值。我在这里找到了解决方案：zigpress.com/2014/11/22/stop-chrome-messing-forms ...解决方案在“禁用Google Chrome自动填充”部分中...添加隐藏字段。
— Cokorda Raka

Answers:

282

将“白色”更改为所需的任何颜色。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
— Fareed Alnamrouti
source
4
好想法。只要有足够的空间（常规尺寸的输入框），我都会坚持使用50或100，以避免在较弱的设备上降低性能。（并且不需要在0之后输入px）
— Frank Nocke 2014年
4
爱这个hack！好主意...每个人都在删除自动填充。我想继续使用自动填充功能，只是要骑上难看的黄色。
— 特拉维斯2014年
1
如果在输入字段后面有背景图像，则仅用白色填充整个区域，则不起作用。我尝试了此页面上的所有解决方案，包括基于jquery的解决方案，但这些解决方案对我没有用，最后我不得不在字段中添加autocomplete =“ off”。
— Myke Black
19
为了还样式的文字颜色使用-webkit-text-fill-color-看这个问题
— 欧文尔斯
2
有错误，我也许没有更改语法，但是现在可以使用：box-shadow: inset 0 0 0 1000px white !important;
— Muhammad Umer
49

如果你们想要透明的输入字段，则可以使用过渡和过渡延迟。 

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;
}
— 吉斯利·弗赖尔·斯瓦瓦森（GísliFreyr Svavarsson）
source
对我来说，最好的解决方案是RGBA颜色值在中不起作用-webkit-box-shadow。还消除了为此声明指定颜色值的需要：默认值仍然适用。
— 塞巴斯蒂安
更好的是使用过渡延迟而不是其持续时间，完全不进行颜色混合
— antoine129
很好，但是由于某种原因，我不得不在文件末尾移动此规则，否则将无法工作
— Igor Mizak
那就是我要找的！谢谢！
— Akhmedzianov Danilian
43

解决方案在这里：

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);
        });
    });
}
— 亚历山德罗·本尼迪蒂
source
这确实有效，而最高答案却没有。但是，我认为自a）以来，我不会尝试更改行为。这是javascript，因此在它之间起作用还有一秒，但它不起作用（直到js加载）和b）。可能会使习惯于默认行为的chrome用户感到困惑。
— TK123 2013年
3
我的镶边只是将黄色重新应用到新输入中：(
— Dustin Silk
请不要。这不适用于任何JS框架，仅适用于静态网站。
— Akhmedzianov Danilian
26

在Firefox中，您可以使用autocomplete =“ off / on”属性禁用表单上的所有自动完成功能。同样，可以使用相同的属性设置各个项目的自动完成功能。

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

您可以在Chrome中对其进行测试，因为它应该可以工作。

— 金兰
source
7
autocomplete="off"这些天无法转弯。
— 若昂
4
不幸的是，此解决方案不再适用于Chrome。
— henrywright 2014年
1
不建议您这样做，因为您实际上并未真正解决实际的问题。相反，您是通过使用户感到沮丧来创建一个新的用户，因为他们必须手动键入其（大概是）登录详细信息（如果他们甚至还记得自己是什么）
— xorinzor
25

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

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中使用。）

— 杰森
source
6
这是我发现有效的唯一解决方案，而没有禁用自动完成功能。
— Xeroxoid
也许不需要设置时间间隔，因为window.load上的Chrome自动填充了吗？
— Timo Huovinen
2
在不删除自动完成的情况下工作，比拥有数百万票赞成的解决方案更好的解决方案。
— Ally
其他解决方案对我不起作用，即使是最受支持的解决方案也对我不起作用。这个问题与@Timo所说的相反，是Chrome无法在window.load处自动填充。即使这有效，但存在的一个问题是，如果没有-webkit-autofill元素，则循环将连续运行。您甚至不需要间隔就可以工作。只需设置一个可能有50毫秒延迟的超时，它就可以正常工作。
— 加文2013年
16

以下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突出显示输入

— 洪巴德
source
如果该字段应用了多个阴影，则播放效果不好。
— 增强我的能力
6

为我工作，只需要更改css。

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

您可以将任何颜色替换为#ffffff。

— 米兰
source
3

有点黑，但对我来说很完美

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
— 马克西米利安
source
3

答案的组合对我有用 

<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>
— 勒罗伊
source
这是在Chrome版本53.0.2785.116 m上同时使用文本和背景的唯一示例
— pleshy
2

这是Jason's的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);                                               


    }
});
— 知己
source
1
不要使用此脚本。如果没有自动填充的元素，则循环将连续运行20毫秒。间隔是不必要的。在window.load之后将超时设置为大约50毫秒，这将花费大量时间来删除样式。
— 加文
2

这可以解决Safari和Chrome上的问题

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}
— Arjan
source
是什么对我有用。但是BUG仍然存在，并且可以看出，没有日期可以确定。code.google.com/p/chromium/issues/detail?id=46543#c22
— Eduardo M
您永远不会清除间隔。这是草率的代码，请不要使用它。
— 加文2013年
1
其实这行不通。我无法在输入中键入任何内容，因为它们一直在被克隆。几乎在那里...
— Dustin Silk
试试这个var id = window.setInterval（function（）{$（'input：-webkit-autofill'）。each（function（）{var clone = $（this）.clone（true，true）; $（this） .after（clone）.remove（）;}）;}，20）; $（'input：-webkit-autofill'）。focus（function（）{window.clearInterval（id）;}）;
— 达斯汀丝（Dastin Silk）
2

这帮助了我，仅CSS版本。

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

其中，白色可以是任何你想要的颜色。

— 马特·古
source
2

我用这个

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */
— 巴夫什·甘加尼
source
1

在您的标签中，只需插入这一小段代码。 

autocomplete="off"

但是，请勿将其放在用户名/电子邮件/ idname字段中，因为如果您仍在使用自动完成功能，它将在此字段中禁用它。但是我找到了解决方法，只需将代码放在密码输入标签中，因为无论如何您永远不会自动完成密码。此修复程序应删除电子邮件/用户名字段上的颜色强制和行自动完成功能，并允许您避免使用Jquery或javascript之类的大型黑客程序。

— 亚历克斯·萨诺夫斯基
source
1

如果您想完全摆脱它，我已经调整了前面的答案中的代码，因此它也可以在悬停，活动和集中进行工作：

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}
— 亚历克斯
source
1
添加一个!important是必要的，但谢谢，它帮助了我很多。
— Polochon 2015年
0

这是Mootools解决方案，与Alessandro的解决方案相同-用新的替换每个受影响的输入。

if (Browser.chrome) {
    $$('input:-webkit-autofill').each(function(item) {
        var text = item.value;
        var name = item.get('name');
        var newEl = new Element('input');
        newEl.set('name', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}
— 最后
source
0

那该解决方案呢：

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

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

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

它将关闭自动完成和自动填充（因此黄色背景消失），等待100毫秒，然后将自动完成功能转回不进行自动填充的状态。

如果您有需要自动填充的输入，请给它们提供auto-complete-onCSS类。

— 哭
source
0

没有一个解决方案对我有用，用户名和密码输入仍在填充中，并且背景为黄色。

所以我问自己：“ Chrome如何确定在给定页面上应自动填充的内容？”

“它会查找输入ID，输入名称吗？表单ID？表单动作？”

通过对用户名和密码输入的实验，发现只有两种方法会导致Chrome无法找到应自动填充的字段：

1）将密码输入置于文本输入之前。2）给他们相同的名称和ID ...或不给名称和ID。

页面加载后，可以使用javascript更改页面上输入的顺序，也可以动态为其提供名称和ID。

而且Chrome不知道是什么原因...自动完成功能不起作用。

疯狂破解，我知道。但这对我有用。

Chrome 34.0.1847.116，OSX 10.7.5

— i_a
source
0

对我有用的唯一方法是：（需要jQuery）

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});
— 用户名
source
0

我为密码字段解决了此问题，如下所示：

将输入类型设置为文本而不是密码

使用jQuery删除输入文本值

使用jQuery将输入类型转换为密码

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');
— 艾哈迈德·阿吉米
source
在Chrome中不起作用。只要该字段变为type = password，Chrome就会将其填入
— mowgli 2014年
0

Arjans解决方案的更新。尝试更改值时，它不会允许您。这对我来说很好。当您专注于输入时，它将变为黄色。它足够接近。

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        var id = window.setInterval(function(){
            $('input:-webkit-autofill').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
    }
});

$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
— 达斯汀丝
source
0

试试这个代码：

 	$(function(){
   		setTimeout(function(){
   			$('[name=user_password]').attr('type', 'password');
   		}, 1000);
   	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">
展开摘要

— АндрійГлущенко
source
0

票价namrouti答案是正确的。但是，当选择输入时，背景仍然变为黄色。添加!important修复问题。如果您还想要textarea并且select具有相同的行为，只需添加textarea:-webkit-autofill, select:-webkit-autofill

仅输入

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

输入，选择，文本区域

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}
— 梅林
source
0

如果要在应用CSS之前避免黄色闪烁，请对那个坏男孩打一下过渡，如下所示： 

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}
— 塞巴斯蒂安
source
-1

最终的解决方案：

$(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);
    }
});
— 查理·诺瓦（Charly Novoa）
source
-5

刚刚发现自己有同样的问题。这对我有用：

form :focus {
  outline: none;
}
3
那就是单击框时框上的轮廓，而不是自动填充输入的背景色
— Claire
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.