chrome表单自动填充后，input文本框背景变成偏黄色，这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性造成的
谷歌默认input自动填充后样式
在谷歌浏览器中，input输入框如果记住保存密码有一个淡黄色背景，chrome的解决方法并不是十分困难，我们只需要把淡黄色的样式覆盖掉就可以了；
情景一：利用纯色的内阴影覆盖掉input的背景色（适用于input为纯色的背景色）
input:-webkit-autofill{
-webkit-box-shadow:000px1000pxwhite inset;
border:1pxsolid#CCC!important;
}
如果你有使用圆角等属性，或者发现输入框的长度高度不太对，可以对其进行调整，除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级，如：
input:-webkit-autofill{
-webkit-box-shadow:000px 1000px white inset;
border:1px solid #CCC !important;
height:27px !important;
line-height:27px !important;
border-radius:0 4px 4px 0;
}
情景二：input文本框是使用图片背景的
这个比较麻烦，目前还没找到完美的解决方法，有两种选择：
1、如果你的图片背景不太复杂，只有一些简单的内阴影，那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景，此时只不过是没有了原来的内阴影效果罢了。
2、如果你实在想留住原来的内阴影效果，那就只能牺牲chrome自动填充表单的功能，使用js去实现，例如：
$(function(){
if(navigator.userAgent.toLowerCase().indexOf("chrome")>=0){
$(window).load(function(){
$('ul input:not(input[type=submit])').each(function(){
varoutHtml=this.outerHTML;
$(this).append(outHtml);
});
});
}
});
qq浏览器默认input自动填充后样式
qq浏览器input自动填充淡黄色背景的更改就比较尴尬了，qq浏览器在极速模式下会提示显示保存密码，下次登录时表单自动填充并且会出现一个淡黄色背景，但是qq浏览器中并无法把原来的 样式的覆盖，最终我的解决方法是 直接把input的的value值清空，这样表单就不会自动填充，从而间接解决了背景色的问题，但是也会出现起的问题，所以这也不是最佳的解决方案。
source：http://blog.csdn.net/zwk199024/article/details/44455605
网友评论