在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
这对我很有用。
.input:-webkit-autofill{过渡:background-color 5000 0s ease-in-out 0;}
其他回答
虽然在许多答案中可以找到的解决方案在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)
如前所述,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;
}
使用这个检查你的问题是否解决了
<input type="email" id="email" name="email" class="form-control validate" onfocus="this.removeAttribute('readonly');" readonly>
试试这个
input:autofill{
filter:none;
}
基本上,浏览器只是为“自动填充”的输入添加了它自己的过滤器。你的款式在这下面。
我有一个纯CSS解决方案,使用CSS过滤器。
filter: grayscale(100%) brightness(110%);
灰度滤镜将黄色替换为灰色,然后亮度删除灰色。
看到CODEPEN