我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。
以下是一些截图:
如何删除背景或只是禁用这个自动填充?
我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。
以下是一些截图:
如何删除背景或只是禁用这个自动填充?
当前回答
下面是一个Mootools解决方案,与Alessandro的解决方案相同——将每个受影响的输入替换为新的输入。
if (Browser.chrome) {
$$('input:-webkit-autofill').each(function(item) {
var text = item.value;
var name = item.get('name');
var newEl = new Element('input');
newEl.set('name', name);
newEl.value = text;
newEl.replaces(item);
});
}
其他回答
将“白色”改为任何你想要的颜色。
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
没有一个解决方案对我有效,用户名和密码输入仍然在填充,并给出黄色背景。
所以我问自己,“Chrome如何决定在给定的页面上应该自动填充什么?”
“它会查找输入id、输入名称吗?”表单的id吗?表单动作?”
通过我对用户名和密码输入的实验,我发现只有两种方法会导致Chrome无法找到应该自动填充的字段:
1)将密码输入放在文本输入之前。 2)给他们相同的名字和身份证……或者没有姓名和身份证。
页面加载后,用javascript你可以改变页面上输入的顺序,或者动态地给他们他们的名字和id…
Chrome不知道是什么击中了它…自动完成关闭。
疯狂的黑客,我知道。但这对我很有用。
Chrome 34.0.1807.116, OSX 10.7.5
如果你想保留自动填充,以及任何数据,附加处理程序和附加到输入元素的功能,试试这个脚本:
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();
});
}
}, 20);
}
它轮询直到找到任何自动填充元素,克隆它们(包括数据和事件),然后将它们插入到相同位置的DOM中,并删除原始元素。一旦它发现任何要克隆的,它就会停止轮询,因为自动填充有时在页面加载后需要一秒钟。这是前面代码样例的一个变体,但是更加健壮,并且尽可能保留了完整的功能。
(已确认可在Chrome、Firefox和ie8中使用。)
下面的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重写浏览器表单填充和输入高亮显示
如果你想完全摆脱它,我已经在之前的回答中调整了代码,使它在悬停,激活和聚焦时也能工作:
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px white inset;
}