我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。
以下是一些截图:
如何删除背景或只是禁用这个自动填充?
我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。
以下是一些截图:
如何删除背景或只是禁用这个自动填充?
当前回答
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 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */
我也有同样的问题。这对我来说很管用:
form :focus {
outline: none;
}
这些答案的组合对我很管用
<style>
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
-webkit-text-fill-color: white !important;
}
</style>
那解决方案呢:
if ($.browser.webkit) {
$(function() {
var inputs = $('input:not(.auto-complete-on)');
inputs.attr('autocomplete', 'off');
setTimeout(function() {
inputs.attr('autocomplete', 'on');
}, 100);
});
}
它会关闭自动完成和自动填充(因此黄色背景消失),等待100毫秒,然后在没有自动填充的情况下将自动完成功能恢复。
如果你有需要自动填充的输入,那么给它们一个自动完成的css类。
为我工作,只有css更改需要。
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}
你可以用任何颜色代替#ffffff。