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: 畢竟是一個很好的功能, 關了多不方便.

1. 經過純色的陰影覆蓋底(huang)色

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

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

1. 經過設置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;
    }