在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
经过2个小时的搜索,似乎谷歌仍然以某种方式覆盖黄色,但我修复了它。这是正确的。它将工作悬停,焦点等以及。你所要做的就是给它加上!important。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px white inset !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;
}
很简单,只要加上,
autocomplete="new-password"
到密码字段。
这对我很有用。
.input:-webkit-autofill{过渡:background-color 5000 0s ease-in-out 0;}
如前所述,inset -webkit-box-shadow对我来说效果最好。
/* Code witch overwrites input background-color */
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}
更改文本颜色的代码片段:
input:-webkit-autofill:first-line {
color: #797979;
}
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;
}