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 */
- 選取偽類
樣式修改後