如何阻止Chrome将网站的输入框泛黄？

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

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

因此，为避免发生该问题，有没有更简单的方法可以阻止Chrome重新为输入框重新着色？

[edit]我尝试了下面的！重要建议，但没有任何效果。我尚未检查Google工具栏，以查看！important属性是否适用于此。

据我所知，除了使用autocomplete属性（确实起作用）之外，没有任何其他方法。

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

这可以用于单个元素

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

...以及整个表格

<form autocomplete="off" ...>

将CSS outline属性设置为none。

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

如果浏览器也可以添加背景色，则可以通过以下方式解决此问题：

:focus { background-color: #fff; }

这正是您要寻找的！

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

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

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

*:focus { outline:none; }

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

.nohighlight:focus { outline:none; }

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

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

（摘自Bill Beckelman：使用CSS覆盖Chrome在活动字段周围的自动边框）

是的，这将是一个严重的头痛，我认为这不值得再次回报。也许您可以稍微调整一下UI策略，而不是将方框涂成红色，而可以将边框变成红色，或者在边框旁边放一个红色的小胶带（例如gmails“ Loading”胶带），当盒子在里面时，它就会消失焦点。

jQuery简直就是小菜一碟：

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

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

我认为更简单的方法是：

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

2. 使用此代码：

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

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

希望它能帮助任何人！

这可行。最棒的是，您可以使用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);
        });
    });
};

对于今天的版本，如果将其放置在两个登录输入之一中，则也可以使用。还要修复40+版本和较晚的Firefox问题。

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

input:focus { outline:none; }

这对我来说非常有效，但更有可能使您网站上的内容保持一致，您还想在CSS中将其包含在textareas中：

textarea:focus { outline:none; }

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

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

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