Question

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

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

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

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

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

Answer 1

将CSS outline属性设置为none。

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

如果浏览器也可以添加背景颜色，可以通过类似

的方式修复

:focus { background-color: #fff; }

Answer 2

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

这可以用于单个元素

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

......以及整个表格

<form autocomplete="off" ...>

Answer 3

这正是你要找的！

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

Answer 4

通过使用一些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 5

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

*:focus { outline:none; }

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

.nohighlight:focus { outline:none; }

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

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

（来自Bill Beckelman：Override Chrome's Automatic Border Around Active Fields Using CSS）

Answer 6

是的，这将是一个令人头痛的问题，我认为这不值得回报。也许你可以略微调整一下你的UI策略，而不是将盒子着色为红色，你可以将边框涂成红色，或者在它旁边放一个小的红色胶带（就像电子邮件“Loading”tape），当盒子在盒子里时它会消失对焦。

Answer 7

我认为更简单的方法是：

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

使用此代码：

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

Answer 8

jQuery是一块蛋糕：

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

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

Answer 9

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

这很有效。最重要的是，你可以使用rgba值（box-shadow inset hack不适用于rgba）。这是对本杰明回答的轻微调整。我使用$（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 11

对于今天的版本，如果置于两个登录输入中的一个中，这也有效。还要修复版本40+和后期Firefox问题。

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

Answer 12

input:focus { outline:none; }

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

textarea:focus { outline:none; }

对大多数人来说，这似乎是显而易见的，但对于初学者，你也可以将它设置为一种颜色：

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

Answer 13

如果我没记错的话，样式表中输入背景颜色的重要规则将覆盖Google工具栏自动填充功能 - 可能与Chrome相同。

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

13 个答案: