1. 錯誤顯示狀態如下：因為Input輸入框并沒有使用【autocomplete="off"】關閉瀏覽器自帶填充表單功能，于是出現自動填充時樣式就變成這樣了~

再來定位到輸入框的樣式，發現自動填充樣式如圖2

2. 解決第一步：修改樣式如下，通過純色的陰影覆蓋底色。

雖然選擇完成后，顯示正常了；但是，鼠標點擊選中狀態依然還是有問題，如圖3

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px #202123 inset;-webkit-text-fill-color: #C9E5FF;
}

3. 解決第二步：繼續添加設置input樣式動畫。終于好了~

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px #202123 inset;-webkit-text-fill-color: #C9E5FF;
}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;
}

總結

以上是生活随笔為你收集整理的chrome浏览器表单自动填充默认样式-autofill设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。