chrome瀏覽器表單自動填充默認樣式-autofill 【轉】

來源：http://blog.csdn.net/zhangdongxu999/article/details/73741390

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);
}

這個樣式的優先級也比較高.
無法通過important覆蓋(這就比較惡心了).
解決方法

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

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

<form autocomplete="off">

<input type="text" autocomplete="off">

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

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

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

BoxShadow參考資料
注: 這種只適用於純色背景的輸入框.

3. 通過設置input樣式動畫

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

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;
    }