Chrome瀏覽器記住密碼後input框黃色背景且背景圖片不顯示的問題

Chrome瀏覽器記住密碼後再進入登陸頁後，輸入框背景顏色變爲黃色，字體顏色變成#000黑色，且添加的背景圖片也那不顯示了，進入審查元素後，發現瀏覽器默認給輸入框添加了樣式，而且沒法經過important修改

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
}

 解決方法：

1.若是沒有設置背景圖片-經過白色陰影覆蓋黃色，並設置字體顏色

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;/*白色*/
     -webkit-text-fill-color: #323333;/*字體顏色*/
}

或經過延遲自動填充的時間

input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-transition-delay: 99999s;
        -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
    }

 

2.有背景圖片

第一種：經過autocomplete="off"關閉瀏覽器自帶填充表單功能

第二種：背景圖片不寫在input裏，利用absolute置於input框上

<div class="inputWrap">
    <span class="userLabel"></span>
    <input placeholder="用戶名" type="text" id="username" name="username">
</div>