關閉chrome瀏覽器的input香蕉黃背景

看風景就發表於2017-08-31
Chrome瀏覽器

chrome瀏覽器input的自動完成，點選之後自動輸入，input的背景會變成香蕉黃，用如下方法修復：

/* Change the white to any color ;) 
就是給input設定內建陰影！而且一定要大，至少要比你的input本身大，不過，box-shadow是很慢的，
而且，如果你的input是用圖片做背景的話，是沒有辦法做這麼幹的*/
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 100px white inset;
}
/* Additionally, you can use this to change the text color: */
-webkit-text-fill-color: yellow !important;

或者

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid green;
    -webkit-text-fill-color: green;
    -webkit-box-shadow: 0 0 0px 1000px #000 inset;
    transition: background-color 5000s ease-in-out 0s;
}

或者直接關閉chrome的自動完成

<input type="text" autocomplete="off">
或
<form autocomplete="off"></form>

 

參考：https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete
           https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/

相關文章