我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。
以下是一些截图:
如何删除背景或只是禁用这个自动填充?
我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。
以下是一些截图:
如何删除背景或只是禁用这个自动填充?
当前回答
<input type="text" name="foo" autocomplete="off" />
类似问题:Link
其他回答
为我工作,只有css更改需要。
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}
你可以用任何颜色代替#ffffff。
<input type="text" name="foo" autocomplete="off" />
类似问题:Link
如果你想保留自动填充,以及任何数据,附加处理程序和附加到输入元素的功能,试试这个脚本:
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被应用,拍打一个过渡的坏男孩像这样:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
transition: background-color 10s ease-in-out 0s;
}
对我来说唯一有效的解决方法是:
:-webkit-autofill {
-webkit-text-fill-color: #000; /* ok for text, no hack */
transition-property: background-color; /* begin hack for background... */
transition-delay: 100000s; /* ...end hack for background */
}
这个解决方案并不理想,还在等待更好的…