CSS 如何阻止 Chrome 使我网站的输入框变黄？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/175951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I stop Chrome from yellowing my site's input boxes?
提问by Dave Rutledge
Among other text and visual aids on a form submission, post-validation, I'm coloring my input boxes red to signify the interactive area needing attention.
在表单提交、验证后的其他文本和视觉辅助工具中，我将输入框涂成红色以表示需要注意的交互区域。
On Chrome (and for Google Toolbar users) the auto-fill feature re-colors my input forms yellow. Here's the complex issue: I want auto-complete allowed on my forms, as it speeds users logging in. I am going to check into the ability to turn the autocomplete attribute to off if/when there's an error triggered, but it is a complex bit of coding to programmatically turn off the auto-complete for the single affected input on a page. This, to put it simply, would be a major headache.
在 Chrome（以及 Google 工具栏用户）上，自动填充功能将我的输入表单重新着色为黄色。这是一个复杂的问题：我希望在我的表单上允许自动完成，因为它可以加快用户登录的速度。如果/当触发错误时，我将检查是否能够将自动完成属性关闭，但它是一个复杂的一些编码以编程方式关闭页面上单个受影响输入的自动完成。简而言之，这将是一个令人头疼的问题。
So to try to avoid that issue, is there any simpler method of stopping Chrome from re-coloring the input boxes?
所以为了避免这个问题，有没有更简单的方法来阻止 Chrome 重新着色输入框？
[edit] I tried the !important suggestion below and it had no effect. I have not yet checked Google Toolbar to see if the !important attribute would work for that.
[编辑] 我尝试了下面的 !important 建议，但没有效果。我还没有检查 Google 工具栏以查看 !important 属性是否适用于此。
As far as I can tell, there isn't any means other than using the autocomplete attribute (which does appear to work).
据我所知，除了使用 autocomplete 属性（似乎确实有效）之外，没有任何其他方法。
采纳答案by Ben Hoffstein
I know in Firefox you can use the attribute autocomplete="off" to disable the autocomplete functionality. If this works in Chrome (haven't tested), you could set this attribute when an error is encountered.
我知道在 Firefox 中你可以使用属性 autocomplete="off" 来禁用自动完成功能。如果这在 Chrome 中有效（尚未测试），您可以在遇到错误时设置此属性。
This can be used for both a single element
这可以用于单个元素
<input type="text" name="name" autocomplete="off">
...as well as for an entire form
...以及整个表格
<form autocomplete="off" ...>
回答by John Leidegren
Set the CSS outline property to none.
将 CSS 大纲属性设置为无。
input[type="text"], input[type="password"], textarea, select {
outline: none;
}
In cases where the browser may add a background color as well this can be fixed by something like
在浏览器也可能添加背景颜色的情况下，这可以通过类似的方法修复
:focus { background-color: #fff; }
回答by JStormThaKid
this is exactly what your looking for!
这正是您要找的！
// Just change "red" to any color
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px red inset;
}
回答by Benjamin
By using a bit of jQuery you can remove Chrome's styling while keeping the autocomplete functionality intact. I wrote a short post about it here: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/
通过使用一些 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);
});
});}
回答by Kita
To remove the border for all fields you can use the following:
要删除所有字段的边框，您可以使用以下内容：
*:focus { outline:none; }
*:focus { outline:none; }
To remove the border for select fields just apply this class to the input fields you want:
要删除选择字段的边框，只需将此类应用于您想要的输入字段：
.nohighlight:focus { outline:none; }
.nohighlight:focus { outline:none; }
You can of course change the border as you desire as well:
当然，您也可以根据需要更改边框：
.changeborder:focus { outline:Blue Solid 4px; }
.changeborder:focus { outline:Blue Solid 4px; }
(From Bill Beckelman: Override Chrome's Automatic Border Around Active Fields Using CSS)
(来自 Bill Beckelman: Override Chrome's AutomaticBorders around Active Fields Using CSS)
回答by Mostlyharmless
Yes, it would be a major headache, which in my opinion isnt worth the return. Maybe you could tweak your UI strategy a bit, and instead of coloring the box red, you could color the borders red, or put a small red tape beside it (like the gmails "Loading" tape) which fades away when the box is in focus.
是的，这将是一个令人头疼的问题，在我看来，这不值得回报。也许你可以稍微调整一下你的 UI 策略，而不是把盒子涂成红色，你可以把边框涂成红色，或者在它旁边放一条小红带（比如 gmail 的“加载”胶带），当盒子在里面时它会消失重点。
回答by Tim
The simpler way in my opinion is:
我认为更简单的方法是：
- Get http://www.quirksmode.org/js/detect.html
Use this code:
if (BrowserDetect.browser == "Chrome") { jQuery('form').attr('autocomplete','off'); };
- 获取http://www.quirksmode.org/js/detect.html
使用此代码：
if (BrowserDetect.browser == "Chrome") { jQuery('form').attr('autocomplete','off'); };
回答by hsobhy
for today's versions, This works too if placed in one of the two login inputs. Also fix the version 40+ and late Firefox issue.
对于今天的版本，如果放置在两个登录输入之一中，这也有效。还修复了 40+ 版本和晚期 Firefox 问题。
<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />
回答by hohner
It's a piece of cake with jQuery:
jQuery 是小菜一碟：
if ($.browser.webkit) {
$("input").attr('autocomplete','off');
}
Or if you want to be a bit more selective, add a class name for a selector.
或者，如果您想更具选择性，请为选择器添加一个类名。
回答by 321X
After applying @Benjamin his solution I found out that pressing the back button would still give me the yellow highlight.
在应用@Benjamin 他的解决方案后，我发现按下后退按钮仍然会给我黄色突出显示。
My solution somehowto prevent this yellow highlight to come back is by applying the following jQuery javascript:
我以某种方式防止此黄色突出显示回来的解决方案是应用以下 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>
Hope it helps anyone!!
希望对大家有帮助！！
