input選擇輸入歷史後樣式改變

一、修改選擇背景色

   **chrome表單自動填充後，input文本框的背景會變成偏黃色的，這是由於chrome會默認給自動填充的input表單加上input:-webkit-autofill私有屬性，然後對其賦予以下樣式：

方式一

 input:-webkit-autofill,
 textarea:-webkit-autofill,
 select:-webkit-autofill {
     background-color: transparent!important;
     background-image: none !important;
     -webkit-box-shadow: 0 0 0 1000px white inset !important;
 }

用足夠大的純色陰影去覆蓋掉黃色背景
在寫實際代碼之前做好CSS樣式重置可避免一系列稀奇古怪的問題。 

方式二

禁用選擇輸入歷史
爲input設置autocomplete=“off”
當input過多時，可以設置js
$(function () {
    $("input").attr("autocomplete", "off");
});

二、修改選擇字體顏色

input:-webkit-autofill {
    /* 選擇歷史記錄的文字顏色*/
    -webkit-text-fill-color: #666;
}

 

若怕出錯，將下面的代碼複製進去即可：

/* 選擇歷史記錄的文字顏色和背景顏色 */
input:-webkit-autofill {
    -webkit-animation: autofill-fix 1s infinite!important;
    /* 選擇歷史記錄的文字顏色*/
    -webkit-text-fill-color: #666;
    -webkit-transition: background-color 50000s ease-in-out 0s!important;
    transition: background-color 50000s ease-in-out 0s!important;
    background-color: transparent!important;
    background-image: none !important;
    /* 選擇歷史記錄的背景顏色 */
    -webkit-box-shadow: 0 0 0 1000px transparent inset!important;
}
[role=button], a, area, button, input:not([type=range]), label, select, summary, textarea {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}
input[type=number], input[type=password], input[type=text], textarea {
    -webkit-appearance: none;
}