在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
这对我来说是有效的(Chrome 76测试)
input:-internal-autofill-selected {
background-color: transparent;
}
其他回答
我有一个纯CSS解决方案,使用CSS过滤器。
filter: grayscale(100%) brightness(110%);
灰度滤镜将黄色替换为灰色,然后亮度删除灰色。
看到CODEPEN
如果你想保持自动完成功能完整,你可以使用一点jQuery来删除Chrome的样式。我在这里写了一篇关于它的短文: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});}
经过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;
}
这将完全删除输入字段中的黄色
我有一个问题,我不能使用盒子阴影,因为我需要输入字段是透明的。这是一个纯粹的CSS。将过渡设置为非常长的时间。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}
你可以改变输入框的样式以及输入框内的文本样式:
在这里你可以使用任何颜色,例如白色,#DDD, rgba(102, 163, 177, 0.45)。
但透明在这里行不通。
/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
另外,你可以用它来改变文本的颜色:
/*Change text in autofill textbox*/
input:-webkit-autofill{
-webkit-text-fill-color: yellow !important;
}
建议:不要使用过多的模糊半径在数百或数千。这没有任何好处,而且可能会将处理器负载放在较弱的移动设备上。(也适用于实际的外部阴影)。对于一个普通的20px高度的输入框,30px的“模糊半径”将完美地覆盖它。