你好,AG视讯平台建站(永易搜旗下)專業提供高性價比的電腦/微信/手機網站建設服務!咨詢電話:0371-56789390

去除Chrome瀏覽器自動填充導致的黃色背景【親測有效】

發布時間:2019年05月29日   點擊次數:86   作者:AG视讯平台建站

AG视讯 做了一個網站后臺,但是自動填充時候,看起來死丑!于是網上找了不少代碼,很多都不管用,于是找到這篇文章的時候,試了一下,立馬可以了。于是分享給大家!

按照以下給input增加樣式

chrome的自動填充樣式
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;

}

AG视讯平台要改的:

1.純色背景,對字體顏色沒作用,可加

AG视讯 -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);
            });
        });
    }

AG视讯 </script>

5.關閉自動填充

AG视讯 <form id="loginForm" method="post" autocomplete="off">

......

</form>

6.css的做法讓自動填充的黃色背景消失,親測有效(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;  

做完之后,自動填充后再也沒有那個難看的黃色背景了!

掃描二維碼,訪問手機站

掃描二維碼,關注微信

Copyright © 2017-2020  tsytgy.com All Rights Reserved 永易搜科技 版權所有
聯系電話:13526646200 QQ:1026593492、1615241386 聯系地址:鄭州市花園路東風路向西300米路南世璽中心西弘熹臺22層