我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。

以下是一些截图:

如何删除背景或只是禁用这个自动填充?


当前回答

下面的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重写浏览器表单填充和输入高亮显示

其他回答

那解决方案呢:

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

它会关闭自动完成和自动填充(因此黄色背景消失),等待100毫秒,然后在没有自动填充的情况下将自动完成功能恢复。

如果你有需要自动填充的输入,那么给它们一个自动完成的css类。

在Firefox中,您可以使用autocomplete="off/on"属性禁用表单上的所有自动完成功能。同样,单个项目的自动完成也可以使用相同的属性设置。

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

你可以在Chrome中测试它,因为它应该工作。

如果你想要透明的输入字段,你可以使用转换和转换延迟。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

我也有同样的问题。这对我来说很管用:

form :focus {
  outline: none;
}

将“白色”改为任何你想要的颜色。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}