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

以下是一些截图:

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


当前回答

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

form :focus {
  outline: none;
}

其他回答

为我工作,只有css更改需要。

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

你可以用任何颜色代替#ffffff。

这帮助了我,一个CSS唯一的版本。

输入:-webkit-autofill { -webkit-box-shadow: 000px 1000px白色嵌入; }

白色可以是你想要的任何颜色。

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

下面是一个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 0px 1000px white inset;
}