1. 錯(cuò)誤顯示狀態(tài)如下：因?yàn)镮nput輸入框并沒(méi)有使用【autocomplete="off"】關(guān)閉瀏覽器自帶填充表單功能，于是出現(xiàn)自動(dòng)填充時(shí)樣式就變成這樣了~

再來(lái)定位到輸入框的樣式，發(fā)現(xiàn)自動(dòng)填充樣式如圖2

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

雖然選擇完成后，顯示正常了；但是，鼠標(biāo)點(diǎn)擊選中狀態(tài)依然還是有問(wèn)題，如圖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. 解決第二步：繼續(xù)添加設(shè)置input樣式動(dòng)畫。終于好了~

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;
}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。