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

Question

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

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

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

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

据我所知，除了使用自动完成属性（它似乎确实有效）之外，没有任何其他方法。

Answer 1

这正是您所寻找的！

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

Answer 2

通过使用一些 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);
    });
});}

Answer 3

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

*:focus {outline:none; 要

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

.nohighlight:focus { Outline:none;

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

.changeborder:focus {outline:Blue Solid 4px; }

（来自比尔·贝克尔曼：使用 CSS 覆盖活动字段周围 Chrome 的自动边框）

Answer 4

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

Answer 5

使用 jQuery 简直就是小菜一碟：

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

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

Answer 6

我认为更简单的方法是：

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

2. 使用此代码：

   if (BrowserDetect.browser == "Chrome") { 
       jQuery('form').attr('自动完成','关闭'); 
     }; 
     

Answer 7

应用@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>

希望它可以帮助任何人！

Answer 8

这有效。 最重要的是，您可以使用 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);
        });
    });
};

Answer 9

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

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

Answer 10

input:focus { outline:none; }

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

textarea:focus { outline:none; }

另外，对于大多数人来说，这似乎是显而易见的，但对于初学者来说，您也可以将其设置为这样的颜色:

input:focus { outline:#HEXCOD SOLID 2px ; }

Answer 11

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

Answer 12

将 CSS 轮廓属性设置为 none。

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

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

:focus { background-color: #fff; }

Answer 13

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

这可以用于单个元素

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

......也可以用于整个表单

<form autocomplete="off" ...>