我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果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;
}
其他回答
在标记中，只需插入这一小行代码。
autocomplete="off"
但是，不要把它放在用户名/电子邮件/idname字段，因为如果你仍然想使用自动完成，它会禁用这个字段。但我找到了一个解决这个问题的方法，简单地把代码放在你的密码输入标签中，因为你永远不会自动完成密码。这个修复应该会移除颜色强制，保持电子邮件/用户名字段的自动完成功能，并让你避免像Jquery或javascript这样的笨重黑客。
最终解决方案:
$(document).ready(function(){
var contadorInterval = 0;
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
var _interval = window.setInterval(function ()
{
var autofills = $('input:-webkit-autofill');
if (autofills.length > 0)
{
window.clearInterval(_interval); // stop polling
autofills.each(function()
{
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
setTimeout(function(){
// $("#User").val('');
$("#Password").val('');
},10);
});
}
contadorInterval++;
if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
}, 20);
}else{
setTimeout(function(){
// $("#User").val('');
$("#Password").val('');
},100);
}
});
这是杰森的MooTools版本。修复它在Safari也。
window.addEvent('domready',function() {
$('username').focus();
if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
{
var _interval = window.setInterval(function ()
{
var autofills = $$('input:-webkit-autofill');
if (autofills.length > 0)
{
window.clearInterval(_interval); // stop polling
autofills.each(function(el)
{
var clone = el.clone(true,true).inject(el,'after');;
el.dispose();
});
}
}, 20);
}
});
下面的CSS删除黄色背景色，并将其替换为您选择的背景色。它不会禁用自动填充，也不需要jQuery或Javascript。
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
解决方案，复制自: 使用HTML/CSS重写浏览器表单填充和输入高亮显示
阿尔扬斯解决方案的更新。当试图改变值时，它不会让你。这对我来说很好。当你聚焦于一个输入时，它就会变黄。够近了。
$(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);});
