Html Google Chrome 表单自动填充及其黄色背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2920306/
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
Google Chrome form autofill and its yellow background
提问by hsz
I have design problem with Google Chrome and its form autofill function. If Chrome remembers some login/password it changes a background color to a yellow one.
我有 Google Chrome 及其表单自动填充功能的设计问题。如果 Chrome 记住了一些登录名/密码，它会将背景颜色更改为黄色。
Here are some screenshots:
以下是一些截图：
How to remove that background or just disable this autofill ?
如何删除该背景或仅禁用此自动填充？
回答by Fareed Alnamrouti
Change "white" to any color you want.
将“白色”更改为您想要的任何颜色。
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
回答by Gísli Freyr Svavarsson
If you guys want transparent input fields you can use transition and transition delay.
如果你们想要透明的输入字段，你可以使用过渡和过渡延迟。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition-delay: 9999s;
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}
回答by Alessandro Benedetti
Solution here:
解决方案在这里：
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 Kinlan
In Firefox you can disable all autocomplete on a form by using the autocomplete="off/on" attribute. Likewise individual items autocomplete can be set using the same attribute.
在 Firefox 中，您可以使用 autocomplete="off/on" 属性禁用表单上的所有自动完成功能。同样，可以使用相同的属性设置单个项目的自动完成功能。
<form autocomplete="off" method=".." action="..">
<input type="text" name="textboxname" autocomplete="off">
You can test this in Chrome as it should work.
您可以在 Chrome 中测试它，因为它应该可以工作。
回答by Jason
If you want to preserve the autofill, as well as any data, attached handlers and functionality attached to your input elements, try this script:
如果您想保留自动填充以及附加到输入元素的任何数据、附加处理程序和功能，请尝试以下脚本：
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
var _interval = window.setInterval(function ()
{
var autofills = $('input:-webkit-autofill');
if (autofills.length > 0)
{
window.clearInterval(_interval); // stop polling
autofills.each(function()
{
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}
}, 20);
}
It polls until it finds any autofill elements, clones them including data and events, then inserts them into the DOM in the same location and removes the original. It stops polling once it finds any to clone since the autofill sometimes takes a second after page load. This is a variation of a previous code sample, but more robust and keeps as much functionality intact as possible.
它会轮询直到找到任何自动填充元素，克隆它们，包括数据和事件，然后将它们插入到 DOM 的相同位置并删除原始元素。一旦找到要克隆的内容，它就会停止轮询，因为自动填充有时会在页面加载后需要一秒钟。这是先前代码示例的变体，但更加健壮，并尽可能保持完整的功能。
(Confirmed working in Chrome, Firefox and IE 8.)
（确认在 Chrome、Firefox 和 IE 8 中工作。）
回答by humbads
The following CSS removes the yellow background color and replaces it with a background color of your choosing. It doesn't disable auto-fill and it requires no jQuery or Javascript hacks.
以下 CSS 移除了黄色背景色并用您选择的背景色替换它。它不会禁用自动填充，也不需要 jQuery 或 Javascript hacks。
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
Solution copied from: Override browser form-filling and input highlighting with HTML/CSS
解决方案复制自： Override browser form-filling and input highlighting with HTML/CSS
回答by Milan
Worked for me, only the css change required.
为我工作，只需要更改 css。
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}
you can put any color in place of #ffffff.
你可以用任何颜色代替#ffffff。
回答by LeRoy
A combination of answers worked for me
答案组合对我有用
<style>
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
-webkit-text-fill-color: white !important;
}
</style>
回答by maximilianhp
A little bit hacky but works perfectly for me
有点hacky，但对我来说非常适合
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
回答by Confidant
Here's the MooTools version of Jason's. Fixes it in Safari too.
这是 Jason's 的 MooTools 版本。在 Safari 中也修复了它。
window.addEvent('domready',function() {
$('username').focus();
if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
{
var _interval = window.setInterval(function ()
{
var autofills = $$('input:-webkit-autofill');
if (autofills.length > 0)
{
window.clearInterval(_interval); // stop polling
autofills.each(function(el)
{
var clone = el.clone(true,true).inject(el,'after');;
el.dispose();
});
}
}, 20);
}
});
