按照以下给input增加样式
chrome的自动填充样式
- input:-webkit-autofill {
- background-color: #FAFFBD;
- background-image: none;
- color: #000;
- }
我们要改的:
1.纯色背景,对字体颜色没作用,可加
-webkit-text-fill-color: #ededed !important;
- input:-webkit-autofill {
- -webkit-box-shadow: 0 0 0px 1000px white inset;
- border: 1px solid #CCC!important;
- }
2.圆角等样式
- input:-webkit-autofill {
- -webkit-box-shadow: 0 0 0px 1000px white inset;
- border: 1px solid #CCC!important;
- height: 27px!important;
- line-height: 27px!important;
- border-radius: 0 4px 4px 0;
- }
3.图片背景
- $(function() {
- if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
- $(window).load(function(){
- $('ul input:not(input[type=submit])').each(function(){
- var outHtml = this.outerHTML;
- $(this).append(outHtml);
- });
- });
- }
- });
4.js
<script type="text/javascript"> if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $(window).load(function(){ $('input:-webkit-autofill').each(function(){ var text = $(this).val(); var userName = $(this).attr('userName'); $(this).after(this.outerHTML).remove(); $('input[userName=' + userName + ']').val(text); }); }); } </script>
5.关闭自动填充
<form id="loginForm" method="post" autocomplete="off">
......
</form>
6.亲测有效(2018年)
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
-webkit-text-fill-color: #ededed !important; //字体颜色
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
background-color:transparent;
background-image: none;
transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
}
input {
background-color:transparent;
}