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

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

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

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

我试过了！下面的重要建议没有任何效果。我还没有检查谷歌工具栏，看看是否！重要的属性可以解决这个问题。

据我所知，除了使用 autocomplete 属性(看起来确实有效) ，没有其他方法。

95807 次浏览
小开

如果我没记错的话！样式表中关于输入背景颜色的重要规则将覆盖谷歌工具栏的自动补全功能——想必同样的规则也适用于 Chrome。

小开

是的，这将是一个很大的头痛，在我看来不值得回报。也许你可以稍微调整一下你的用户界面策略，不要把盒子涂成红色，你可以把边框涂成红色，或者在它旁边放一个小的红色胶带(比如 gmail 的“装载”胶带) ，当盒子聚焦的时候它就会消失。

小开
最佳答案

我知道在 Firefox 中可以使用属性 autocomplete = “ off”来禁用 autocomplete 功能。如果这在 Chrome 中可以工作(还没有测试过) ，你可以在遇到错误时设置这个属性。

这可以同时用于单个元素

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

... 以及整个形式

<form autocomplete="off" ...>
小开

将 CSS 大纲属性设置为无。

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

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

:focus { background-color: #fff; }
小开

通过使用一点 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 在活动域周围的自动边框)

小开

在我看来，更简单的方法是:

  1. 接通 http://www.quirksmode.org/js/detect.html

  2. 使用以下代码:

    if (BrowserDetect.browser == "Chrome") {
jQuery('form').attr('autocomplete','off');
};
小开 
input:focus { outline:none; }

这对我来说非常有用，但是更有可能在你的网站上保持统一的东西，你会想要在你的文本区的 CSS 中包含这个:

textarea:focus { outline:none; }

对于大多数人来说，这也是显而易见的，但是对于初学者来说，你也可以将它设置成这样的颜色:

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

对于 jQuery 来说，这是小菜一碟:

if ($.browser.webkit) {
$("input").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)。这是“本杰明”答案的一个小调整。我正在使用 $(文档)。Ready ()而不是 $(window)。加载()。它似乎更适合我-现在有更少的 FOUC。我不认为使用 $(文档)有什么缺点和不足。准备好了。

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);
});
});
};
小开

这正是你要找的！

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

对于今天的版本，如果将其放在两个登录输入中的一个中，也可以正常工作。还修复了40 + 版本和最新的 Firefox 问题。

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

提交答案