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

以下是一些截图:

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


当前回答

如果你想避免黄色闪烁,直到你的css被应用,拍打一个过渡的坏男孩像这样:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

其他回答

有点俗气,但对我来说很合适

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

添加autocomplete="off"并不能解决问题。

将输入类型属性更改为type="search"。 谷歌不会对输入的搜索类型应用自动填充。

希望这能为您节省一些时间。

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

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;
}

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

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