在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
试试这个
input:autofill{
filter:none;
}
基本上,浏览器只是为“自动填充”的输入添加了它自己的过滤器。你的款式在这下面。
其他回答
谷歌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*/
}
以上所有的答案都有效,但也有缺点。下面的代码是上述两个答案的融合,工作完美无缺,没有眨眼。
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;
}
这是我的解决方案,我使用了过渡和过渡延迟,因此我可以在我的输入字段上有一个透明的背景。
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 type="email" id="email" name="email" class="form-control validate" onfocus="this.removeAttribute('readonly');" readonly>
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;
}