在我正在处理的一个表单上,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;
}
这将完全删除输入字段中的黄色
其他回答
SASS
input:-webkit-autofill
&,
&:hover,
&:focus,
&:active
transition-delay: 9999s
transition-property: background-color, color
这招对我很管用:
padding: 5px;
background-clip: content-box;
谢谢便雅悯!
Mootools解决方案有点棘手,因为我不能通过使用$('input:-webkit-autofill')来获取字段,所以我使用的是以下内容:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
window.addEvent('load', function() {
setTimeout(clearWebkitBg, 20);
var elems = getElems();
for (var i = 0; i < elems.length; i++) {
$(elems[i]).addEvent('blur', clearWebkitBg);
}
});
}
function clearWebkitBg () {
var elems = getElems();
for (var i = 0; i < elems.length; i++) {
var oldInput = $(elems[i]);
var newInput = new Element('input', {
'name': oldInput.get('name'),
'id': oldInput.get('id'),
'type': oldInput.get('type'),
'class': oldInput.get('class'),
'value': oldInput.get('value')
});
var container = oldInput.getParent();
oldInput.destroy();
container.adopt(newInput);
}
}
function getElems() {
return ['pass', 'login']; // ids
}
我有一个纯CSS解决方案,使用CSS过滤器。
filter: grayscale(100%) brightness(110%);
灰度滤镜将黄色替换为灰色,然后亮度删除灰色。
看到CODEPEN
更新2022
2022年更新后工作:
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: transparent !important;
}