Chrome瀏覽器表單自動填充預設樣式

Chrome會在客戶登陸過某網站之後, 會自動記住密碼 
當你下次再次進入該網站的時候, 可以自由的選擇登陸的賬號, Chrome會為你自動填充密碼. 而你無需再輸入密碼 
這本身是一個很好的功能, 但是對於開發者而言, 卻有一個很讓人難受的問題. 
當你選擇賬號密碼之後, 你的輸入框會變成黃色… x黃色 (額. 只是因為我單純的不喜歡這個顏色. 勿噴, 謝謝).

樣式對比

變色前 
 
變色後 

樣式分析

之所以出現這樣的樣式, 是因為Chrome會自動為input增加如下樣式.

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

• 1
• 2
• 3
• 4
• 5

這個樣式的優先順序也比較高. 
無法通過important覆蓋(這就比較噁心了).

解決方法

1. 關閉瀏覽器自帶填充表單功能

如果你的網站安全級別高一些, 可以直接關閉. 也不需要再調樣式了.

<!-- 對整個表單的設定 -->
<form autocomplete="off">
<!-- 單獨對某個元件設定 -->
<input
 
 type="text" autocomplete="off">

• 1
• 2
• 3
• 4

PS: 畢竟是一個很好的功能, 關了多不方便.

2. 通過純色的陰影覆蓋底(huang)色

input:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px white inset;
 -webkit-text-fill-color: #333;
}

• 1
• 2
• 3
• 4

3. 通過設定input樣式動畫

推薦使用這種的. 因為基本上沒有人會等那麼久…

<!-- 99999s 基本上就是一個無限長的時間 
    通過延長增加自動填充背景色的方式, 是使用者感受不到樣式的變化
-->
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;
    }