在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
我们有一个场景,其中我们有一个复选框来启用或禁用输入字段。
如果选中复选框,字段将被禁用。一旦复选框未选中,输入字段将被启用。我们可以使用chrome自动填充来填充这些字段,如地址和所有。
在点击返回的复选框后自动填充输入字段被禁用,但Chrome添加的背景字段填充自动填充在我的情况下,这些是城市,州和zip字段
在我不得不做的禁用输入字段中保持透明度
input:disabled:-webkit-autofill,
input:disabled:-webkit-autofill:hover,
input:disabled:-webkit-autofill:focus,
input:disabled:-webkit-autofill:active {
transition: background-color 5000s;
-webkit-text-fill-color: #fff !important;
-webkit-background-clip: text;
color: white !important;
}
其他回答
这是我的解决方案,我使用了过渡和过渡延迟,因此我可以在我的输入字段上有一个透明的背景。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
-webkit-transition-delay: 9999s;
}
尝试隐藏自动填充样式
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;
}
不幸的是,上述解决方案在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)">
基本上,它在保存值的同时删除标记,并重新创建它,然后放回值。
这招对我很管用:
padding: 5px;
background-clip: content-box;
这对我来说是用来删除字段的黄色背景的:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-transition-delay: 99999s;
-webkit-text-fill-color:#D7D8CE;
}