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

【问题标题】：Google Chrome form autofill and its yellow backgroundGoogle Chrome 表单自动填充及其黄色背景
【发布时间】：2011-02-24 14:32:48
【问题描述】：

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

以下是一些截图：

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

【问题讨论】：

  • 我也想看看有没有答案。
  • 对于造型来说，这个颜色可以和设计元素认真搭配，比如Chrome中输入标签的轮廓，我更想改变颜色而不是关闭它。
  • Google 似乎在某种程度上承认了这个问题。见code.google.com/p/chromium/issues/detail?id=46543
  • 要禁用自动完成，您可以将 autocomplete="off" 添加到您的输入元素，例如
  • 只是一个附加信息：当我有一个密码字段时，我被这个咬了。我的字段自动突出显示（黄色）并填充了奇怪的值。我在这里找到了解决方案：zigpress.com/2014/11/22/stop-chrome-messing-forms ...解决方案在“禁用 Google Chrome 自动填充”部分中...添加隐藏字段。

标签： html css forms google-chrome autofill


【解决方案1】：

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

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

【讨论】：

  • 好主意。只要足够（常规大小的输入框），我会坚持使用 50 或 100，以避免对较弱设备的潜在性能影响。 （并且 0 之后不需要 px）
  • 喜欢这个技巧！好主意……每个人都在删除自动填充。我想保持自动填充，只是为了摆脱丑陋的黄色。
  • 如果您的输入字段后面有背景图像，则无法使用白色填充整个区域。我尝试了此页面上的所有解决方案，包括基于 jquery 的解决方案，但它们对我不起作用，最后我不得不将 autocomplete="off" 添加到该字段。
  • 要同时设置文本颜色的样式，请使用-webkit-text-fill-color - 请参阅this question
  • 有错误，我可能没有更改语法，但现在可以使用：box-shadow: inset 0 0 0 1000px white !important;
【解决方案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;
}

【讨论】：

  • 对我来说最好的解决方案，因为 RGBA 颜色值在 -webkit-box-shadow 中不起作用。也消除了为此声明提供颜色值的需要：默认值仍然适用。
  • 更好的是使用过渡延迟而不是持续时间，根本没有颜色混合
  • 很好，但由于某种原因，我不得不将这条规则移到文件末尾，否则不起作用
  • 这就是我要找的！谢谢！
【解决方案3】：

解决方案here：

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

【讨论】：

  • 这确实有效，而最佳答案却没有。但是我认为我不会尝试改变行为，因为 a)。这是javascript，所以在它工作和它不工作之间有一秒钟（直到js加载）和b）。它可能会使习惯于默认行为的 chrome 用户感到困惑。
  • 我的 chrome 只是将黄色重新应用到新输入 :(
  • 请不要。这不适用于任何 JS 框架，仅适用于静态网站。
【解决方案4】：

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

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

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

【讨论】：

  • 目前无法访问 autocomplete="off"。
  • 很遗憾，此解决方案不再适用于 Chrome。
  • 强烈建议不要这样做，因为您并没有真正解决这里的实际问题。相反，您正在通过让用户感到沮丧来创建一个新的，因为他们必须手动输入他们的（大概）登录详细信息（如果他们甚至记得他们是什么）
【解决方案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 中工作。）

【讨论】：

  • 这是我发现的唯一可行的解​​决方案，没有禁用自动完成功能。
  • 可能不需要设置间隔，因为 window.load 上的 chrome 会自动填充？
  • 在不删除自动完成的情况下工作，比拥有数百万票的解决方案要好得多。
  • 其他解决方案对我不起作用，即使是最受好评的解决方案，但这个解决方案可以。与上面@Timo 所说的相反的问题是Chrome 不会在window.load 处自动填充。尽管这可行，但它的一个问题是，如果没有 -webkit-autofill 元素，循环会继续运行。你甚至不需要一个间隔来工作。只需设置一个可能延迟 50 毫秒的超时，它就会正常工作。
【解决方案6】：

以下 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

【讨论】：

  • 如果该字段应用了多个阴影，则效果不佳。
【解决方案7】：

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

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

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

【讨论】：

    【解决方案8】：

    有点老套，但对我来说很完美

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

    【讨论】：

      【解决方案9】：

      对我有用的答案组合

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

      【讨论】：

      • 这是唯一一个在 Chrome 版本 53.0.2785.116 m 上同时适用于文本和背景的示例
      【解决方案10】：

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


    }
});

      【讨论】：

      • 不要使用这个脚本。如果没有自动填充的元素，循环将持续运行 20 毫秒。间隔是不必要的。在 window.load 之后设置一个大约 50 毫秒的超时时间，这将有足够的时间来删除样式。
      【解决方案11】：

      这解决了 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);
}

      【讨论】：

      • 对我有用。但是BUG仍然存在，并且可以看出，没有修复的日期。 code.google.com/p/chromium/issues/detail?id=46543#c22
      • 你永远不会清除你的间隔。这是草率的代码，不要使用它。
      • 其实这行不通。我无法在输入中输入任何内容，因为它们不断被克隆。快到了……
      • 试试这个 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);});
      【解决方案12】：

      这对我有帮助，这是一个纯 CSS 版本。

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

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

      【讨论】：

        【解决方案13】：

        我用这个，

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

        【讨论】：

          【解决方案14】：

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

          autocomplete="off"

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

          【讨论】：

            【解决方案15】：

            如果您想完全摆脱它，我已经调整了之前答案中的代码，使其也适用于悬停、活动和焦点：

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

            【讨论】：

            • 添加!important 是必要的，但谢谢，它对我帮助很大。
            【解决方案16】：

            如果你想在你的 css 被应用之前避免黄色闪烁，像这样在那个坏男孩上拍一个过渡：

            input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

            【讨论】：

              【解决方案17】：

              这是一个与 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);
    });
}

              【讨论】：

                【解决方案18】：

                那个解决方案怎么样：

                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-on css 类。

                【讨论】：

                  【解决方案19】：

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

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

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

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

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

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

                  Chrome 不知道是什么击中了它……自动完成功能一直关闭。

                  我知道，这太疯狂了。但它对我有用。

                  Chrome 34.0.1847.116、OSX 10.7.5

                  【讨论】：

                    【解决方案20】：

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

                    $(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

                    【讨论】：

                      【解决方案21】：

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

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

                      使用 jQuery 删除输入文本值

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

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

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

                      【讨论】：

                      • 在 Chrome 中不起作用。一旦该字段变为 type=password，Chrome 就会将其填入
                      【解决方案22】：

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

                      【讨论】：

                        【解决方案23】：

                        试试这个代码：

                         	$(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">

                        【讨论】：

                          【解决方案24】：

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

                          【讨论】：

                            【解决方案25】：

                            添加autocomplete="off" 是不行的。

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

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

                            【讨论】：

                              【解决方案26】：

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

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

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

                              【讨论】：

                                【解决方案27】：

                                最终解决方案：

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

                                【讨论】：

                                  【解决方案28】： 
                                  <input type="text" name="foo" autocomplete="off" />

                                  类似问题：Link

                                  【讨论】：

                                  【解决方案29】：

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

                                  form :focus {
  outline: none;
}

                                  【讨论】：

                                  • 这是您点击时框上的轮廓，而不是自动填充输入的背景颜色
                                  猜你喜欢
                                  • 2014-12-13
                                  • 2014-04-07
                                  • 2016-08-31
                                  • 2021-06-04
                                  • 2017-06-11
                                  • 2019-07-09
                                  • 2015-05-21
                                  相关资源
                                  最近更新 更多
                                  热门标签
                                  Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode