我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。
以下是一些截图:
如何删除背景或只是禁用这个自动填充?
我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。
以下是一些截图:
如何删除背景或只是禁用这个自动填充?
当前回答
阿尔扬斯解决方案的更新。当试图改变值时,它不会让你。这对我来说很好。当你聚焦于一个输入时,它就会变黄。够近了。
$(document).ready(function (){
if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
var id = window.setInterval(function(){
$('input:-webkit-autofill').each(function(){
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}, 20);
$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
}
});
$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
其他回答
在Firefox中,您可以使用autocomplete="off/on"属性禁用表单上的所有自动完成功能。同样,单个项目的自动完成也可以使用相同的属性设置。
<form autocomplete="off" method=".." action="..">
<input type="text" name="textboxname" autocomplete="off">
你可以在Chrome中测试它,因为它应该工作。
Fareed namrouti回答正确。但是当选择输入时,背景仍然是黄色的。重要的是解决问题。如果你也想用同样的行为添加textarea:-webkit-autofill,选择:-webkit-autofill
仅输入
input:-webkit-autofill {
background-color: rgb(250, 255, 189) !important;
}
输入,选择,文本区域
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189) !important;
}
唯一适合我的方法是:(jQuery要求)
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});
解决方案:
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);
});
});
}
如果你想完全摆脱它,我已经在之前的回答中调整了代码,使它在悬停,激活和聚焦时也能工作:
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px white inset;
}