## 解決 Input AutoComplete 問題
### 什麼是 AutoComplete ?

填寫表單 input、textarea、select 元素的自動輸入字段，通常值來自於使用者過去輸入值。autoComplete 預設為開啟。

### 什麼時候 input 才會出現 autoComplete ?

1. input 出現在 form 表單元素內
2. input 具有 id 或 name
3. Form 內有 type=‘submit’ 的 button

<form>
  <input id="account"/>
  <button type="submit">
    click
  </button>
</form>

### Autofill 預設樣式

#### 第一種情況
點擊 AutoComplete 後預設樣式為 淺藍背景、黑字

#### 第二種情況
出自於 vee-validate
黑色背景、白字
AutoComplete 後再打字 input會閃爍一下。

### 如何改變預設樣式
#### 解決第一種情況
box-shadow : 用於改變背景顏色
caret-color : 改變插入符號的顏色
text-fill-color : 文字顏色

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 50px firebrick inset !important;
  caret-color: white !important;
  -webkit-text-fill-color: white !important;
}

#### 解決第二種情況
box-shadow : 用於改變背景顏色
caret-color : 改變插入符號的顏色text-fill-color : 文字顏色transition : 使閃爍動畫執行時間延長到 600000s，這樣就看不出來

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 50px firebrick inset !important;
  caret-color: white !important;
  -webkit-text-fill-color: white !important;
   transition: background-color 600000s 0s, color 600000s 0s !important;
}

### 2023 解法

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  box-shadow: inset 0 0 0 1px #222F3E, inset 0 0 0 100px #222F3E; // 背景色
  caret-color: #FFFFFF !important; // 字體顏色
  -webkit-text-fill-color: #FFFFFF !important; // 字體顏色
}

##