如何阻止Chrome浏览器变黄我的网站的input框？
在表单提交，后validation等其他文本和视觉辅助工具中，我将我的input框设为红色，以表示需要注意的交互区域。
在Chrome（以及Google工具栏用户）上，自动填充function会将我的input表单重新着色为黄色。 这是一个复杂的问题：我希望自动完成允许在我的表单上，因为它加快了用户的login速度。我将检查能否将自动完成属性closures，如果/当有错误触发，但它是一个复杂的编码位以编程方式closures页面上单个受影响input的自动完成。 简而言之，这将是一个令人头疼的问题。
所以为了避免这个问题，有没有更简单的方法来阻止Chrome重新着色input框？
我尝试了！下面的重要build议，它没有效果。 我还没有检查Google工具栏，看看！重要的属性是否可以工作。
据我所知，除了使用autocomplete属性（看起来工作）没有任何其他的方法。
我知道在Firefox中，您可以使用属性autocomplete =“off”来禁用自动完成function。 如果在Chrome中可以使用（尚未testing），则可以在遇到错误时设置此属性。
这可以用于一个单一的元素
<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; }
这正是你想要的！
// Just change "red" to any color input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px red inset; }
通过使用一点jQuery你可以删除Chrome的样式，同时保持自动完成function不变。 我在这里写了一篇关于它的短文： 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; }
要删除select字段的边框，只需将此类应用于所需的input字段：
.nohighlight:focus { outline:none; }
你当然也可以根据你的需要改变边界：
.changeborder:focus { outline:Blue Solid 4px; }
（来自Bill Beckelman： 使用CSS覆盖Chrome的活动字段的自动边框 ）
是的，这将是一个令人头疼的问题，在我看来这不值得回报。 也许你可以稍微调整一下你的UI策略，而不是将框着色为红色，而是将框着色为红色，或者在框旁边放一小段繁文tape节（比如gmails“Loading”磁带），当框处于焦点。
这是jQuery的一块蛋糕：
if ($.browser.webkit) { $("input").attr('autocomplete','off'); }
或者，如果您想要更具select性，请为select器添加一个类名称。
我认为更简单的方法是：
- 获取http://www.quirksmode.org/js/detect.html
-
使用此代码：
if (BrowserDetect.browser == "Chrome") { jQuery('form').attr('autocomplete','off'); };
他的解决scheme应用@Benjamin后，我发现按下后退button仍然会给我黄色的亮点。
我的解决scheme， 以防止这个黄色突出显示回来是通过应用下面的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）。 这是对本杰明答案的微调。 我使用$（document）.ready（）而不是$（window）.load（）。 这似乎对我更好 – 现在FOUCless得多。 我不相信使用$（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); }); }); };
对于今天的版本，如果放置在两个logininput之一中，这也是有效的。 还修复版本40+和Firefox后期问题。
<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />
如果我没有记错的话，input框背景色的样式表中的重要规则将会覆盖Google工具栏的自动完成function – 推测大概Chrome浏览器也是这样。
input:focus { outline:none; }
这对我很好，但很可能保持统一的东西在你的网站上，你也想把这个包括在textareas的CSS中：
textarea:focus { outline:none; }
对大多数人来说，这看起来也是显而易见的，但对初学者来说，你也可以将其设置为一种颜色：
input:focus { outline:#HEXCOD SOLID 2px ; }
最好的解决scheme如此（最less）
input:-webkit-autofill { box-shadow: 0 0 0 1000px white inset; &:hover, &:focus { box-shadow: 0 0 0 1000px white inset; } }
随着Mootools
function fixchromeyellow() { if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $$('input["input:-webkit-autofill"]').each(function(el) { el.clone().inject(el,"after"); el.destroy(); }); } } window.setTimeout(fixchromeyellow, 500);
