248

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

以下是一些截图：

替代文字 替代文字

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

4

29 回答 29

285

将“白色”更改为您想要的任何颜色。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
于 2013-01-07T23:37:53.297 回答
51

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

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;
}
于 2015-09-10T15:37:44.527 回答
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);
        });
    });
}
于 2010-11-16T16:33:09.003 回答
26

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

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

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

于 2010-05-27T10:44:56.300 回答
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 中工作。）

于 2011-07-13T14:14:49.270 回答
16

下面的 CSS 移除黄色背景颜色并用您选择的背景颜色替换它。它不会禁用自动填充，也不需要 jQuery 或 Javascript hack。

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

复制自： Override browser form-filling and input highlighting with HTML/CSS

于 2014-01-15T16:41:27.607 回答
6

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

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

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

于 2016-01-21T09:12:13.907 回答
3

有点hacky，但对我来说非常有用

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
于 2015-08-06T12:55:06.833 回答
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>
于 2016-02-05T09:38:45.007 回答
2

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


    }
});
于 2012-10-08T22:29:28.220 回答
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);
}
于 2013-01-18T00:24:46.437 回答
2

这帮助了我，一个纯 CSS 的版本。

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

白色可以是您想要的任何颜色。

于 2015-05-22T23:48:40.837 回答
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 */
于 2015-06-28T10:53:02.157 回答
1

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

autocomplete="off"

但是，不要将其放在用户名/电子邮件/idname 字段中，因为如果您仍在寻找使用自动完成功能，它将禁用此字段。但我找到了解决这个问题的方法，只需将代码放在密码输入标签中，因为无论如何你永远不会自动完成密码。此修复应删除电子邮件/用户名字段上的颜色强制、matinain 自动完成功能，并允许您避免像 Jquery 或 javascript 这样的大块黑客。

于 2012-01-25T01:42:30.783 回答
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;
}
于 2015-02-03T14:01:26.413 回答
1

如果您想在应用 css 之前避免黄色闪烁，请像这样对那个坏男孩进行过渡：

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}
于 2018-10-08T12:31:03.260 回答
0

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

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);
    });
}
于 2011-06-03T09:28:25.443 回答
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 类。

于 2013-02-01T15:12:54.343 回答
0

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

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

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

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

1）将密码输入放在文本输入之前。2) 给他们相同的名字和 id ...或者没有名字和 id。

页面加载后，您可以使用 javascript 更改页面上输入的顺序，或者动态地为它们提供名称和 id ...

而且 Chrome 不知道是什么击中了它……自动完成功能保持关闭。

疯狂的黑客，我知道。但它对我有用。

铬 34.0.1847.116，OSX 10.7.5

于 2014-04-25T22:51:50.043 回答
0

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

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});
于 2014-05-14T18:41:10.013 回答
0

我为这样的密码字段解决了这个问题：

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

使用 jQuery 删除输入文本值

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

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

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');
于 2014-06-25T12:40:43.230 回答
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);});
于 2015-04-30T09:50:45.253 回答
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">

于 2015-07-21T09:11:12.117 回答
0

fareed 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;
}
于 2015-09-25T14:45:23.653 回答
0

添加autocomplete="off"不会削减它。

将输入类型属性更改为type="search".
Google 不会对具有某种搜索类型的输入应用自动填充。

希望这可以节省您一些时间。

于 2015-10-28T16:41:04.823 回答
0

在我的情况下唯一有效的解决方案：

:-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 */
}

这个解决方案并不理想，它正在等待找到更好的......

于 2021-09-02T07:30:32.150 回答
-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);
    }
});
于 2014-04-11T15:21:31.873 回答
-2 
<input type="text" name="foo" autocomplete="off" />

类似问题：链接

于 2014-05-13T13:59:39.747 回答
-5

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

form :focus {
  outline: none;
}
于 2012-05-27T17:13:59.817 回答