在表单提交和验证后的其他文本和视觉辅助工具中，我将输入框涂成红色以表示需要注意的交互区域。
在 Chrome（以及 Google 工具栏用户）上，自动填充功能将我的输入表单重新着色为黄色。这是一个复杂的问题：我希望在我的表单上允许自动完成，因为它可以加速用户登录。我将检查如果/当触发错误时将自动完成属性关闭的能力，但它是一个复杂的一些编码以编程方式关闭页面上单个受影响输入的自动完成。简而言之，这将是一个令人头疼的问题。
因此，为了避免这个问题，有没有更简单的方法可以阻止 Chrome 重新着色输入框？
[编辑] 我尝试了下面的 !important 建议，但没有效果。我还没有检查 Google 工具栏以查看 !important 属性是否适用。
据我所知，除了使用 autocomplete 属性（这似乎确实有效）之外，别无他法。
将 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; }
（来自 Bill Beckelman：Override Chrome's Automatic Border around Active Fields Using CSS）
是的，这将是一个令人头疼的问题，在我看来不值得回报。也许你可以稍微调整一下你的 UI 策略，而不是把盒子涂成红色，你可以把边框涂成红色，或者在它旁边放一个小的繁文缛节（比如 gmails“加载”磁带），当盒子在里面时它会消失重点。
使用 jQuery 简直是小菜一碟：
if ($.browser.webkit) {
$("input").attr('autocomplete','off');
}
或者，如果您想更有选择性，请为选择器添加类名。
我认为更简单的方法是：
使用此代码：
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 大概也是如此。