我有 2 种基本形式：登录和注册，都在同一页面上。现在，我对自动填写登录表单没有任何问题，但是注册表也会自动填写，我不喜欢它。
此外，表单样式有一个黄色背景，我无法覆盖它，我不想使用内联 CSS 来这样做。我该怎么做才能让它们不再被染成黄色和（可能）自动填充?
问问题
216149 次
25 回答
254
用“强大”的内部阴影来欺骗它：
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;
}
于 2012-12-13T12:35:37.713 回答
179
对于自动完成，您可以使用：
<form autocomplete="off">
关于着色问题：
从您的屏幕截图中，我可以看到 webkit 生成以下样式：
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
1）由于 #id-styles 比 .class 样式更重要，因此以下可能有效：
#inputId:-webkit-autofill {
background-color: white !important;
}
2）如果这不起作用，您可以尝试通过 javascript 以编程方式设置样式
$("input[type='text']").bind('focus', function() {
$(this).css('background-color', 'white');
});
3）如果这不起作用，你注定要失败:-)考虑一下：这不会隐藏黄色，但会使文本再次可读。
input:-webkit-autofill {
color: #2a2a2a !important;
}
4）一个css/javascript解决方案：
CSS：
input:focus {
background-position: 0 0;
}
并且必须在加载时运行以下 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)
}
}
例如：
<body onload="loadPage();">
祝你好运 ：-）
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）从这里：
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);
});
});
}
于 2010-03-10T11:54:14.433 回答
28
添加此 CSS 规则，黄色背景颜色将消失。:)
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
于 2013-10-17T11:56:45.317 回答
20
经过 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;
}
这将从输入字段中完全删除黄色
于 2016-11-03T09:31:08.220 回答
17
<form autocomplete="off">
几乎所有现代浏览器都会尊重这一点。
于 2010-02-25T22:21:04.243 回答
15
这似乎对我有用：
input {
-webkit-background-clip: text !important;
}于 2020-10-02T04:24:33.930 回答
3
您还可以将表单元素的 name 属性更改为生成的内容，这样浏览器就不会跟踪它。但是，如果请求 url 相同，firefox 2.x+ 和 google chrome 似乎没有太多问题。尝试基本上为注册表单添加盐请求参数和盐字段名称。
但是我认为 autocomplete="off" 仍然是最佳解决方案:)
于 2010-02-25T22:26:06.847 回答
3
从 HTML5 开始，您可以禁用自动完成功能（通过autocomplete="off"），但您不能覆盖浏览器的突出显示。您可以尝试::selection在 CSS 中弄乱（大多数浏览器需要供应商前缀才能工作），但这也可能对您没有帮助。
除非浏览器供应商专门实现了一种特定于供应商的方式来覆盖它，否则您无法对已经打算为用户覆盖站点样式表的此类样式做任何事情。这些通常在应用样式表之后应用，并且! important也会忽略覆盖。
于 2010-03-06T23:58:27.950 回答
3
有时，当您只有<form>元素中的代码时，浏览器上的自动完成仍然会自动完成。
我也尝试将它放入<input>元素中，并且效果更好。
<form autocomplete="off"> AND <input autocomplete="off">
然而，对该属性的支持已停止，请阅读 https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1
https://bugzilla.mozilla.org/show_bug.cgi?id=956906
我发现的另一个解决方法是在输入字段中取出占位符，表明它是电子邮件、用户名或电话字段（即“您的电子邮件”、“电子邮件”等”）
这使得浏览器不知道它是什么类型的字段，因此不会尝试自动完成它。
于 2014-07-30T22:24:52.737 回答
1
这解决了 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);
}
于 2013-01-18T00:28:01.373 回答
1
该form元素具有autocomplete您可以设置为的属性off。从 CSS开始，!important属性后面的指令可以防止它被覆盖：
background-color: white !important;
只有IE6不明白。
如果我误解了你，还有outline你会发现有用的属性。
于 2010-03-07T00:02:19.693 回答
1
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.
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='';" />
于 2011-01-28T04:47:32.447 回答
1
让我们使用一点 css hack：
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
input:-internal-autofill-selected {
-webkit-text-fill-color: #000;
background: #fff !important;
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0%), inset 0 0 0 100px #fff;
}
于 2021-04-22T16:33:28.813 回答
0
我已经看到 Google 工具栏的自动完成功能被 javascript 禁用了。它可能与其他一些自动填充工具一起使用；我不知道它是否有助于内置自动完成功能的浏览器。
<script type="text/javascript"><!--
if(window.attachEvent)
window.attachEvent("onload",setListeners);
function setListeners(){
inputList = document.getElementsByTagName("INPUT");
for(i=0;i<inputList.length;i++){
inputList[i].attachEvent("onpropertychange",restoreStyles);
inputList[i].style.backgroundColor = "";
}
selectList = document.getElementsByTagName("SELECT");
for(i=0;i<selectList.length;i++){
selectList[i].attachEvent("onpropertychange",restoreStyles);
selectList[i].style.backgroundColor = "";
}
}
function restoreStyles(){
if(event.srcElement.style.backgroundColor != "")
event.srcElement.style.backgroundColor = "";
}//-->
</script>
于 2010-03-11T00:24:59.357 回答
0
在尝试了很多事情之后，我找到了有效的解决方案，可以对自动填充的字段进行核对并用重复的字段替换它们。为了不丢失附加事件，我想出了另一个（有点冗长）的解决方案。
在每个“输入”事件中，它会迅速将“更改”事件附加到所有涉及的输入。它测试它们是否已被自动填充。如果是，则发送一个新的文本事件，该事件将诱使浏览器认为该值已被用户更改，从而允许删除黄色背景。
var initialFocusedElement = null
, $inputs = $('input[type="text"]');
var removeAutofillStyle = function() {
if($(this).is(':-webkit-autofill')) {
var val = this.value;
// Remove change event, we won't need it until next "input" event.
$(this).off('change');
// Dispatch a text event on the input field to trick the browser
this.focus();
event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, '*');
this.dispatchEvent(event);
// Now the value has an asterisk appended, so restore it to the original
this.value = val;
// Always turn focus back to the element that received
// input that caused autofill
initialFocusedElement.focus();
}
};
var onChange = function() {
// Testing if element has been autofilled doesn't
// work directly on change event.
var self = this;
setTimeout(function() {
removeAutofillStyle.call(self);
}, 1);
};
$inputs.on('input', function() {
if(this === document.activeElement) {
initialFocusedElement = this;
// Autofilling will cause "change" event to be
// fired, so look for it
$inputs.on('change', onChange);
}
});
于 2012-12-03T20:43:09.590 回答
0
适用于所有浏览器的简单 javascript 解决方案：
setTimeout(function() {
$(".parent input").each(function(){
parent = $(this).parents(".parent");
$(this).clone().appendTo(parent);
$(this).attr("id","").attr("name","").hide();
});
}, 300 );
克隆输入，重置属性并隐藏原始输入。iPad 需要超时
于 2014-04-25T09:24:18.967 回答
0
您链接到的屏幕截图表明 WebKit 正在使用input:-webkit-autofill这些元素的选择器。你试过把它放在你的 CSS 中吗？
input:-webkit-autofill {
background-color: white !important;
}
如果这不起作用，那么可能什么都不会。突出显示这些字段以提醒用户他们已自动填充私人信息（例如用户的家庭住址），并且可以认为允许隐藏页面存在安全风险。
于 2010-03-07T00:02:02.530 回答
0
由于浏览器搜索密码类型字段，另一种解决方法是在表单开头包含一个隐藏字段：
<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
于 2014-10-13T03:25:35.650 回答
0
请尝试在您的输入标签中使用 autocomplete="none"
这对我有用
于 2020-01-27T09:06:29.380 回答
0
您可以使用样式自动填充输入:-webkit-autofill
即使在带有 webkit-prefix 的 Firefox 中！
要更改背景颜色，可以使用 box-shadow 技巧。
对于 Firefox，您还需要filter:none.
:-webkit-autofill {
filter:none; /* needed for firefox! */
box-shadow: 0 0 0 100px rgba(38, 163, 48, 0.212) inset;
}
于 2021-04-13T02:32:56.647 回答
0
现代浏览器不支持自动完成关闭。我发现解决自动完成的最简单方法是使用 HTML 和 JS 进行小跟踪。首先要做的是将 HTML 中的输入类型从“密码”更改为“文本”。
<input class="input input-xxl input-watery" type="text" name="password"/>
自动完成在窗口加载后开始。没关系。但是当您的字段类型不是“密码”时，浏览器不知道它必须完成哪些字段。因此，表单字段不会自动完成。
之后，将事件焦点绑定到密码字段，例如。在骨干网：
'focusin input[name=password]': 'onInputPasswordFocusIn',
在onInputPasswordFocusIn中，只需通过简单检查将字段的类型更改为密码：
if (e.currentTarget.value === '') {
$(e.currentTarget).attr('type', 'password');
}
就是这样！
UPD：这个东西不适用于禁用的 JavaSciprt
2018年的UPD。还发现了一些有趣的技巧。将 readonly 属性设置为输入字段，并在焦点事件上将其删除。首先防止浏览器自动填充字段，其次将允许输入数据。
于 2017-01-18T12:41:05.877 回答
0
我已经阅读了很多线程并尝试了很多代码。在收集了所有这些东西之后，我发现干净地清空登录名和密码字段并将其背景重置为白色的唯一方法如下：
$(window).load(function() {
setTimeout(function() {
$('input:-webkit-autofill')
.val('')
.css('-webkit-box-shadow', '0 0 0px 1000px white inset')
.attr('readonly', true)
.removeAttr('readonly')
;
}, 50);
});
请随时发表评论，如果您发现一些改进，我愿意接受所有改进。
于 2016-08-08T14:39:43.403 回答
0
我还必须将文本颜色更改为更暗的颜色（请参阅 StackOverflow 深色主题颜色）。
所以最终得到了@Tamás Pap、@MCBL 和@don 的解决方案的混合体：
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
-webkit-text-stroke-color: #e7e8eb !important;
-webkit-text-fill-color: #e7e8eb !important;
}
于 2020-05-25T18:59:52.083 回答
-3
为什么不把它放在你的 CSS 中：
input --webkit-autocomplete {
color: inherit;
background: inherit;
border: inherit;
}
那应该可以解决您的问题。虽然它确实引发了可用性问题，因为现在用户无法看到表单是按照他/她习惯的方式自动填写的。
[编辑] 发布此帖子后，我看到已经给出了类似的答案，并且您对此发表评论说它不起作用。我不太明白为什么，因为当我测试它时它确实有效。
于 2010-03-11T16:18:14.957 回答
-3
这里真正的问题是 Webkit (Safari, Chrome, ...) 有一个错误。当页面上有多个[form]，每个都有一个[input type="text" name="foo" ...]（即属性'name'具有相同的值），然后当用户返回到页面，自动填充将在页面上第一个 [form] 的输入字段中完成，而不是在发送的 [form] 中完成。第二次，NEXT [form] 将被自动填充，依此类推。只有具有相同名称的输入文本字段的 [form] 会受到影响。
这应该报告给 Webkit 开发人员。
Opera 自动填充右边的 [form]。
Firefox 和 IE 不会自动填充。
所以，我再说一遍：这是 Webkit 中的一个 bug。
于 2012-02-01T10:58:57.273 回答