在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
这是我的解决方案,我使用了过渡和过渡延迟,因此我可以在我的输入字段上有一个透明的背景。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
-webkit-transition-delay: 9999s;
}
其他回答
要有一个透明的背景,同时不使用时间延迟(特别是在现代web应用程序中,人们可以停止使用它一段时间,并希望界面的行为是可预测的),使用这个:
input:-webkit-autofill {
-webkit-background-clip: text;
}
身体{ 背景:lightblue; } 输入{ 背景:透明; } 输入。no-autofill-bkg: -webkit-autofill { -webkit-background-clip:文本; } <input type="text" name="email" /> <input type="text" name="email" class="no-autofill-bkg" />
工作环境:Chrome 83 / 84.0.4147.89, Edge 84.0.522.44
如果你决定重新发布我的解决方案,我只要求你包括我的名字或链接到这个。
谢谢便雅悯!
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
}
不幸的是,上述解决方案在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)">
基本上,它在保存值的同时删除标记,并重新创建它,然后放回值。
两年后线复活。我围绕着这个问题工作了几天,发现了一个简单的技巧来防止这个丑陋的自动完成功能:
只需添加一个随机字符串来形成目标,如<form action="site.com/login.php?random=123213">
它工作在最新的chrome版本34.0.1847.137
更新:如果它不起作用,给动作奇怪的协议,比如<form id="test" action="xxx://">,然后用javascript填充这个区域:
$('#test').attr('action', 'http://example.site/login.php');
更新2:仍然有问题,我决定完全删除<形式>标签和post变量通过jquery。它更容易。
我有一个解决方案,如果你想防止从谷歌chrome的自动填充,但它有点“砍刀”,只是删除类谷歌chrome添加到那些输入字段,并设置值为“”,如果你不需要显示存储数据后加载。
$(document).ready(function () {
setTimeout(function () {
var data = $("input:-webkit-autofill");
data.each(function (i, obj) {
$(obj).removeClass("input:-webkit-autofill");
obj.value = "";
});
}, 1);
});