我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码，它会将背景颜色更改为黄色。
以下是一些截图:
如何删除背景或只是禁用这个自动填充?
当前回答
如果你想避免黄色闪烁，直到你的css被应用，拍打一个过渡的坏男孩像这样:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
transition: background-color 10s ease-in-out 0s;
}
其他回答
我也有同样的问题。这对我来说很管用:
form :focus {
outline: none;
}
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;
}
阿尔扬斯解决方案的更新。当试图改变值时，它不会让你。这对我来说很好。当你聚焦于一个输入时，它就会变黄。够近了。
$(document).ready(function (){
if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
var id = window.setInterval(function(){
$('input:-webkit-autofill').each(function(){
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}, 20);
$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
}
});
$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
我用这个，
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 */
下面是一个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);
});
}
