在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
更新2022
2022年更新后工作:
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: transparent !important;
}
其他回答
很简单,只要加上,
autocomplete="new-password"
到密码字段。
这对我很有用。
.input:-webkit-autofill{过渡:background-color 5000 0s ease-in-out 0;}
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();
}
再次抱歉,我更希望它是一个评论。
如果你想要,我可以放一个链接到我使用它的网站。
我有个更好的办法。
将背景设置为如下所示的另一种颜色并不能解决我的问题,因为我需要一个透明的输入字段
-webkit-box-shadow: 0 0 0px 1000px white inset;
所以我尝试了一些其他的方法,然后我想到了这个:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
}
虽然在许多答案中可以找到的解决方案在Chrome中都可以使用,但在Mac和iOS的Safari中却不能使用。
Safari需要一个额外的语句- background-clip。
这是一个解决方案的完整代码,适用于不同平台上的所有主要浏览器:
/* Disable autofill highlighting */
input:-webkit-autofill {
-webkit-text-fill-color: var(--text-input-color) !important;
-webkit-box-shadow: 0 0 0 1rem var(--page-background-color) inset !important;
background-clip: content-box !important;
}
(请用自己的值修改——text-input-color和——page-background-color)