在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
这已经被设计,因为这个着色行为已经从WebKit。它允许用户了解已预填充的数据。错误1334
你可以通过以下方式关闭自动完成功能:
<form autocomplete="off">
...
</form
或者你可以通过以下方式改变自动填充的颜色:
input:-webkit-autofill {
color: #2a2a2a !important;
}
请注意,这里有一个正在跟踪的错误,以便再次工作:http://code.google.com/p/chromium/issues/detail?id=46543
这是一个WebKit行为。
其他回答
以上所有的答案都有效,但也有缺点。下面的代码是上述两个答案的融合,工作完美无缺,没有眨眼。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
Daniel Fairweather的解决方案(移除Chrome自动补全的输入背景色?)(我很想给他的解决方案投票,但仍然需要15个代表)真的很好。有一个非常大的不同,大多数好评的解决方案:你可以保留背景图片!但有一点小改动(只是Chrome检查)
你需要记住,它只适用于可见的领域!
因此,如果您正在为表单使用$.show(),则需要在show()事件之后运行此代码
我的完整解决方案(我有一个显示/隐藏按钮登录表单):
if (!self.isLoginVisible()) {
var container = $("#loginpage");
container.stop();
self.isLoginVisible(true);
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
var documentForms = document.forms;
for (i = 0; i < documentForms.length; i++) {
for (j = 0; j < documentForms[i].elements.length; j++) {
var input = documentForms[i].elements[j];
if (input.type == "text" || input.type == "password" || input.type == null) {
var text = input.value;
input.focus();
var event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, 'a');
input.dispatchEvent(event);
input.value = text;
input.blur();
}
}
}
}
} else {
self.hideLogon();
}
再次抱歉,我更希望它是一个评论。
如果你想要,我可以放一个链接到我使用它的网站。
这可能有点晚了,但对于未来的参考,有一个CSS唯一的解决方案,Olly Hodgons在这里展示 http://lostmonocle.com/post/1479126030/fixing-the-chrome-autocomplete-background-colour
您所要做的就是添加一个进一步的选择器来覆盖默认的输入字段设置 所以用而不是
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
仕
#login input:-webkit-autofill {
background-color: #ff00ff;
}
or
form input:-webkit-autofill {
background-color: #f0f;
}
这对我来说似乎很管用。
谷歌Chrome用户代理阻止开发者的CSS,所以改变自动填充UI必须使用另一个属性,像这样:
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
/*use inset box-shadow to cover background-color*/
-webkit-text-fill-color: #ffa400 !important;
/*use text fill color to cover font color*/
}
更新2022
2022年更新后工作:
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: transparent !important;
}