自定義表單自動填充的樣式

原文：https://www.codecasts.com/blo...

表單自動填充是什麼

本文談論的表單自動填充是指：瀏覽器在網頁中識別到一個表單的字段時，提供一個容許用戶自動填充的功能，以下圖

上圖的 GIF 顯示的過程就是自動填充。而咱們須要自定義的樣式就是圖中黃色的部分

注意到上圖的郵件的表單字段了麼？自動填充以後，它就有了一個黃色的背景，這在不少狀況下會與咱們原來的網頁配色格格不入。

因此，咱們來自定義一下這個自動填充的樣式。

解決方案

其實很簡單，咱們能夠使用 -webkit-autofill 來設置自動填充的樣式，就像咱們常規使用的 CSS 同樣，能夠定義它的 border 和 font-size 等，至於背景色，咱們能夠使用 -webkit-box-shadow 來指定，字體的顏色使用 -webkit-text-fill-color 設置，因此，最後的 CSS 代碼大概是這樣：

:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus {
    borrder: none;
    -webkit-text-fill-color: #000; // 自定義字體的顏色
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;// 背景色
    transition: background-color 5000s ease-in-out 0s;
    font-weight: 500;
}

通俗的解決方案能夠相似上面這樣，這個代碼能夠直接放到你的 CSS 文件中。效果以下圖，注意咱們沒有了黃色的背景：

若是說你還想針對不一樣的表單類型(input,textarea,select等)進行不一樣的自動填充樣式的修改，能夠在 -webkit-autofill 加上 input，textarea 前綴，好比針對input 的設置能夠是這樣：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
     border: none;
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
    font-weight: 500;
}

同理，能夠分別設置 textarea 和 select 表單。