如何阻止 Chrome 使我网站的输入框变黄？

Posted 2023-02-22

【中文标题】如何阻止 Chrome 使我网站的输入框变黄？

【英文标题】：How do I stop Chrome from yellowing my site's input boxes?

【发布时间】：2010-09-15 14:42:38

【问题描述】：

在表单提交和验证后的其他文本和视觉辅助工具中，我将输入框涂成红色以表示需要注意的交互区域。

在 Chrome（以及对于 Google 工具栏用户）上，自动填充功能会将我的输入表单重新着色为黄色。这是一个复杂的问题：我希望在我的表单上允许自动完成，因为它可以加速用户登录。我将检查如果/当触发错误时将自动完成属性关闭的能力，但它是一个复杂的一些编码以编程方式关闭页面上单个受影响输入的自动完成。简而言之，这将是一个令人头疼的问题。

为了避免这个问题，有没有更简单的方法可以阻止 Chrome 重新着色输入框？

[edit] 我尝试了下面的 !important 建议，但没有效果。我还没有检查 Google 工具栏以查看 !important 属性是否适用。

据我所知，除了使用 autocomplete 属性（似乎确实有效）之外没有其他方法。

【问题讨论】：

这不仅仅是 Chrome 中的问题。其他浏览器的 Google 工具栏对输入字段进行相同的“黄色化”。

我已经为你提供了一个答案，它在下面有效。

我不明白为什么每个人都在谈论大纲：没有，问题是关于黄色背景，而不是大纲。并且自动完成属性设置为关闭不会解决问题，因为 davebug 说他希望自动完成工作，而不是黄色背景。

【参考方案1】：

对于今天的版本，如果放置在两个登录输入之一中，这也可以工作。还修复了版本 40+ 和后期的 Firefox 问题。

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />

【参考方案2】：

这正是您要找的！

// Just change "red" to any color
input:-webkit-autofill 
    -webkit-box-shadow: 0 0 0px 1000px red inset;

【讨论】：

这是一个很棒的技巧。谢谢

我也会对此加以关注 :D input:-webkit-autofill, input:focus:-webkit-autofill -webkit-box-shadow: 0 0 0px 1000px #FFF inset;

嗨@JStormThaKid，我用过这个...，但没有正确输入...请回答这个...

感谢您回答他实际提出的问题！我几乎开始失去希望了。

最佳答案在这里，我仍然想要谷歌自动完成，所以谢谢

【参考方案3】：

这行得通。最重要的是，您可以使用 rgba 值（box-shadow inset hack 不适用于 rgba）。这是对@Benjamin 答案的细微调整。我正在使用 $(document).ready() 而不是 $(window).load()。它似乎对我来说效果更好——现在 FOUC 少了很多。我不认为使用 $(document).ready() 有任何缺点。

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) 
    $(document).ready(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);
        );
    );
;

【参考方案4】：

应用@Benjamin 他的解决方案后，我发现按下后退按钮仍然会给我黄色突出显示。

我的解决方案以某种方式 防止这个黄色突出显示回来是通过应用以下 jQuery javascript：

<script type="text/javascript">
    $(function() 
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) 
        var intervalId = 0;
            $(window).load(function() 
                intervalId = setInterval(function ()  // << somehow  this does the trick!
                    if ($('input:-webkit-autofill').length > 0) 
                        clearInterval(intervalId);
                        $('input:-webkit-autofill').each(function () 
                            var text = $(this).val();
                            var name = $(this).attr('name');
                            $(this).after(this.outerHTML).remove();
                            $('input[name=' + name + ']').val(text);
                        );
                    
                , 1);
            );
        
    );
</script>

希望对大家有帮助！！

【参考方案5】：

我认为更简单的方法是：

获取http://www.quirksmode.org/js/detect.html

使用此代码：

if (BrowserDetect.browser == "Chrome") 
  jQuery('form').attr('autocomplete','off');
;

【参考方案6】：

将 CSS 大纲属性设置为无。

input[type="text"], input[type="password"], textarea, select  
    outline: none;

如果浏览器也可能添加背景颜色，这可以通过类似的方式修复

:focus  background-color: #fff; 

【讨论】：

背景？我不知道 Chrome 也添加了背景颜色？如果是这样，可以通过:focus background-color: #fff;

之类的方法来解决

用 CSS 取消轮廓可能会防止变黄，但不会阻止实际的自动填充。如果你想这样做，使用自动完成属性很重要，无论是否非标准。

@pestaa 正确，这不是正确答案，但它确实解决了类似的问题

在处理平板电脑和其他东西时要小心，默认的android浏览器没有轮廓有点难以使用。不过很容易应用于非移动浏览器:)

一个小改进：input[type=text], input[type=password], input[type=email], textarea, select outline: none;

【参考方案7】：

使用 jQuery 简直是小菜一碟：

if ($.browser.webkit) 
    $("input").attr('autocomplete','off');

或者，如果您想更有选择性，请为选择器添加类名。

【参考方案8】：

要删除所有字段的边框，您可以使用以下命令：

*:focus outline:none;

要删除选择字段的边框，只需将此类应用于您想要的输入字段：

.nohighlight:focus outline:none;

您当然也可以根据需要更改边框：

.changeborder:focus outline:Blue Solid 4px;

（来自比尔·贝克尔曼：Override Chrome's Automatic Border Around Active Fields Using CSS）

【参考方案9】：

input:focus  outline:none; 

这对我来说非常有用，但很可能会在您的网站上保持统一，您还希望将其包含在 textareas 的 CSS 中：

textarea:focus  outline:none; 

这对大多数人来说似乎很明显，但对于初学者来说，您也可以将其设置为这样的颜色：

input:focus  outline:#HEXCOD SOLID 2px ; 

【参考方案10】：

通过使用一些 jQuery，您可以删除 Chrome 的样式，同时保持自动完成功能不变。我在这里写了一篇关于它的短文： http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

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

【讨论】：

感谢您的提示！但是，在发布表单后，单击返回按钮，黄色突出显示又回来了。我已经扩展了你的 sn-p（见我的回答）来涵盖这个。

+1 @Benjamin 不错的解决方案，它会闪烁一点黄色，但最后会修复；）

【参考方案11】：

如果我没记错的话，样式表中输入背景颜色的 !important 规则将覆盖 Google 工具栏的自动完成功能 - 大概 Chrome 也是如此。

【参考方案12】：

我知道在 Firefox 中您可以使用属性 autocomplete="off" 来禁用自动完成功能。如果这在 Chrome 中有效（尚未测试），您可以在遇到错误时设置此属性。

这可以同时用于单个元素

<input type="text" name="name" autocomplete="off">

...以及整个表单

<form autocomplete="off" ...>

【讨论】：

"我将检查是否/当触发错误时将自动完成属性关闭的能力，但是以编程方式关闭自动完成是一个复杂的编码页面上的单一影响输入。”

嘿...是的，谢谢，不过我想我仍然需要检查 Chrome，对吧？

对于使用 Rails 简单表单的人<%= simple_form_for @user, html: autocomplete: 'off' do |f| %>

很抱歉这对我没有帮助

【参考方案13】：

是的，这将是一个令人头疼的问题，在我看来这不值得回报。也许你可以稍微调整一下你的 UI 策略，而不是把盒子涂成红色，你可以把边框涂成红色，或者在它旁边放一个小的繁文缛节（比如 gmails“加载”磁带），当盒子在里面时它会消失重点。