30天挑戰：「設定input autofill樣式」技術記錄

總結

並非透過background-color，而是box-shadow來調整 input 在 autofill 狀態下的背景顏色

樣式套用前

• 透過 autofill 選擇要填入表單的內容後，發現 input 欄位呈現出瀏覽器預設的文字與背景顏色，且無法透過color與background-color來修改其設定
• 解決方式：
  • 選取偽類:-webkit-autofill、:-webkit-autofill:hover與:-webkit-autofill:focus
  • 文字顏色透過-webkit-text-fill-color來設定
  • input 背景色使用box-shadow來實作

  -webkit-text-fill-color: var(--dark);
  box-shadow: inset 0 0 0 1000px var(--white);
  /* 使用內陰影，模糊程度為0，並設定散播1000px */

樣式修改後

參考文件

• Change Autocomplete Styles in WebKit Browsers
• chrome 浏览器中自带 input 样式 input:-internal-autofill-selected（修改 input 背景色）
• CSS（一）chrome 浏览器表单自动填充默认样式-autofill