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

将 CSS 大纲属性设置为无。

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

在浏览器也可以添加背景颜色的情况下，这可以通过类似的东西来修复

:focus { background-color: #fff; }

---

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

这可以用于单个元素

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

...以及整个表格

<form autocomplete="off" ...>

---

这正是您要找的！

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

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

---

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

---

使用 jQuery 简直是小菜一碟：

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

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

---

我认为更简单的方法是：

获取 http://www.quirksmode.org/js/detect.html 使用此代码： 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; }

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

textarea:focus { outline:none; }

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

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

---

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

---