使用 HTML/CSS 覆盖浏览器表单填充和输入突出显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2338102/
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
Override browser form-filling and input highlighting with HTML/CSS
提问by casraf
I have 2 basic forms -- sign in and sign up, both on the same page. Now, I have no problem with the sign in form auto-filling, but the sign up form auto fills as well, and I don't like it.
我有 2 个基本表格——登录和注册，都在同一页面上。现在，我对登录表单自动填写没有问题，但是注册表单也会自动填写，我不喜欢它。
Also, the form styles get a yellow background which I can't manage to override and I don't want to use inline CSS to do so. What can I do to make them stop being colored yellow and (possibly) auto filling? Thanks in advance!
此外，表单样式有一个黄色背景，我无法覆盖它，我不想使用内联 CSS 来这样做。我该怎么做才能让它们不再被染成黄色和（可能）自动填充? 提前致谢！
回答by Tamás Pap
Trick it with a "strong" inside shadow:
用一个“强”的内部阴影来欺骗它：
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: 0 0 0 50px white inset;/*your box-shadow*/
-webkit-text-fill-color: #333;
}
回答by Phil Rykoff
for the autocompletion, you can use:
对于自动完成，您可以使用：
<form autocomplete="off">
regarding the coloring-problem:
关于着色问题：
from your screenshot i can see that webkit generates the following style:
从您的屏幕截图中，我可以看到 webkit 生成以下样式：
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
1) as #id-styles are even more important than .class styles, the following maywork:
1) 由于 #id-styles 比 .class 样式更重要，以下可能有效：
#inputId:-webkit-autofill {
background-color: white !important;
}
2) if that won't work, you can try to set the style via javascript programmatically
2）如果这不起作用，您可以尝试以编程方式通过javascript设置样式
$("input[type='text']").bind('focus', function() {
$(this).css('background-color', 'white');
});
3) if that won't work, you're doomed :-)consider this:
this wont hide the yellow color, but will make the text readable again.
3) 如果那行不通，那你就完蛋了:-)考虑一下：这不会隐藏黄色，但会使文本再次可读。
input:-webkit-autofill {
color: #2a2a2a !important;
}
4) a css/javascript solution:
4) 一个 css/javascript 解决方案：
css:
css：
input:focus {
background-position: 0 0;
}
and the following javascript has to be run onload:
并且必须在加载时运行以下 javascript：
function loadPage()
{
if (document.login)//if the form login exists, focus:
{
document.login.name.focus();//the username input
document.login.pass.focus();//the password input
document.login.login.focus();//the login button (submitbutton)
}
}
eg:
例如：
<body onload="loadPage();">
good luck :-)
祝你好运 ：-）
5) If none of the above work try removing the input elements, cloning them, then placing the cloned elements back on the page (works on Safari 6.0.3):
5) 如果上述工作都没有尝试删除输入元素，克隆它们，然后将克隆的元素放回页面上（适用于 Safari 6.0.3）：
<script>
function loadPage(){
var e = document.getElementById('id_email');
var ep = e.parentNode;
ep.removeChild(e);
var e2 = e.cloneNode();
ep.appendChild(e2);
var p = document.getElementById('id_password');
var pp = p.parentNode;
pp.removeChild(p);
var p2 = p.cloneNode();
pp.appendChild(p2);
}
document.body.onload = loadPage;
</script>
6) From here:
6）从这里：
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 MCBL
Add this CSS rule, and yellow background color will disapear. :)
添加此 CSS 规则，黄色背景颜色将消失。:)
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
回答by don
After 2 hours of searching it seems Google Chrome still overrides the yellow color somehow, but I found the fix. It will work for hover, focus etc. as well. All you have to do is to add !importantto it.
经过 2 小时的搜索，似乎谷歌浏览器仍然以某种方式覆盖了黄色，但我找到了解决办法。它也适用于悬停、聚焦等。你所要做的就是添加!important它。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
this will completely remove yellow color from input fields
这将从输入字段中完全去除黄色
回答by Jason Kester
<form autocomplete="off">
Pretty much all modern browsers will respect that.
几乎所有现代浏览器都会尊重这一点。
回答by Dmitriy Likhten
You can also change the name attribute of your form elements to be something generated so that the browser won't keep track of it. HOWEVER firefox 2.x+ and google chrome seems to not have much problems with that if the request url is identical. Try basically adding a salt request param and a salt field name for the sign-up form.
您还可以将表单元素的 name 属性更改为生成的内容，以便浏览器不会跟踪它。但是，如果请求 url 相同，firefox 2.x+ 和 google chrome 似乎没有太大问题。尝试为注册表单添加一个 salt 请求参数和一个 salt 字段名称。
However I think autocomplete="off" is still top solution :)
但是我认为 autocomplete="off" 仍然是最佳解决方案:)
回答by Alan Plum
You can disable auto-completion as of HTML5 (via autocomplete="off"), but you CAN'T override the browser's highlighting. You could try messing with ::selectionin CSS (most browsers require a vendor prefix for that to work), but that probably won't help you either.
您可以从 HTML5 开始禁用自动完成功能（通过autocomplete="off"），但您不能覆盖浏览器的突出显示。您可以尝试弄乱::selectionCSS（大多数浏览器需要供应商前缀才能工作），但这可能也无济于事。
Unless the browser vendor specifically implemented a vendor-specific way of overriding it, you can't do anything about such styles that are already intended to override the site's stylesheet for the user. These are usually applied after your stylesheets are applied and ignore ! importantoverrides, too.
除非浏览器供应商专门实现了覆盖它的供应商特定方式，否则您无法对已经打算为用户覆盖站点样式表的此类样式做任何事情。这些通常在您的样式表被应用之后应用并且也忽略! important覆盖。
回答by andstud.io
Sometimes autocomplete on the browser still autocompletes when you just have the code in the <form>element.
有时，当您只有<form>元素中的代码时，浏览器上的自动完成仍然会自动完成。
I tried putting it in the <input>element as well and it worked better.
我也尝试将它放入<input>元素中，效果更好。
<form autocomplete="off"> AND <input autocomplete="off">
Support for this attribute however is ceasing, please read https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1
然而，对这个属性的支持正在停止，请阅读 https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1
https://bugzilla.mozilla.org/show_bug.cgi?id=956906
https://bugzilla.mozilla.org/show_bug.cgi?id=956906
Another work around that I've found is taking out placeholders inside of the input fields that suggest that it is an email, username, or phone field (ie. "Your Email", "Email", etc.")
我发现的另一个解决方法是在输入字段中取出占位符，这些占位符表明它是电子邮件、用户名或电话字段（即“您的电子邮件”、“电子邮件”等）
This makes it so that browsers don't know what kind of field it is, thus doesn't try to autocomplete it.
这使得浏览器不知道它是什么类型的字段，因此不会尝试自动完成它。
回答by whitehorse
If it's in input field you're trying to "un-yellow" ...
如果它在输入字段中，您正在尝试“取消黄色”......
- Set a background-color with css... let's say #ccc (light gray).
- Add value="sometext", which temporary fills the field with "sometext"
- (optional) Add a little javascript to make the "sometext" clear when you go to put the real text in.
- 使用 css 设置背景颜色...假设 #ccc（浅灰色）。
- 添加 value="sometext"，它临时用“sometext”填充字段
- （可选）添加一些 javascript 以在您放入真实文本时使“sometext”清晰。
So, it might look like this:
所以，它可能看起来像这样：
<input id="login" style="background-color: #ccc;" value="username"
onblur="if(this.value=='') this.value='username';"
onfocus="if(this.value=='username') this.value='';" />
回答by Arjan
This fixes the problem on both Safari and Chrome
这解决了 Safari 和 Chrome 上的问题
if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
$('input:-webkit-autofill').each(function(){
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}, 20);
}
