在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
尝试隐藏自动填充样式
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
background-color: #FFFFFF !important;
color: #555 !important;
-webkit-box-shadow: 0 0 0 1000px white inset !important;
-webkit-text-fill-color: #555555 !important;
}
其他回答
我有个更好的办法。
将背景设置为如下所示的另一种颜色并不能解决我的问题,因为我需要一个透明的输入字段
-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;
}
2023 -透明背景
对于深色背景上的透明输入背景(浅色文本):
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-text-fill-color: #ffffff;
}
不幸的是,上述解决方案在2016年对我都不起作用(在这个问题提出几年后)
下面是我使用的积极的解决方案:
function remake(e){
var val = e.value;
var id = e.id;
e.outerHTML = e.outerHTML;
document.getElementById(id).value = val;
return true;
}
<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">
基本上,它在保存值的同时删除标记,并重新创建它,然后放回值。
虽然在许多答案中可以找到的解决方案在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)
我放弃!
由于没有办法用自动补全来改变输入的颜色,我决定禁用所有这些webkit浏览器用jQuery。是这样的:
if (/webkit/.test(navigator.userAgent.toLowerCase())) {
$('[autocomplete="on"]').each(function() {
$(this).attr('autocomplete', 'off');
});
}