在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
除此之外:
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
你可能还想补充
input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}
另一方面,当你点击输入时,黄色会回来。 对于焦点,如果你使用bootstrap,第二部分是用于边界突出显示0 0 8px rgba(82, 168, 236, 0.6);
这样它看起来就像任何自举输入。
其他回答
谢谢便雅悯!
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
}
更新2022
2022年更新后工作:
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: transparent !important;
}
不幸的是,上述解决方案在2016年对我都不起作用(在这个问题提出几年后)
下面是我使用的积极的解决方案:
function remake(e){
var val = e.value;
var id = e.id;
e.outerHTML = e.outerHTML;
document.getElementById(id).value = val;
return true;
}
<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">
基本上,它在保存值的同时删除标记,并重新创建它,然后放回值。
以上所有的答案都有效,但也有缺点。下面的代码是上述两个答案的融合,工作完美无缺,没有眨眼。
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;
}
虽然在许多答案中可以找到的解决方案在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)