背景:使用element-ui組件的el-input做登錄界面,有賬號和密碼兩個選擇框
問題:chrome自帶密碼自動填充功能,填充之后input:-internal-autofill-selected默認屬性會填充背景色,這個屬性不能直接修改
解決方案:
在網上找了很多個方法,如什么設置密碼框 的autocomplete="new-password", 這個沒生效,可能chrome版本的問題。
還有是加一段CSS:
/deep/ input:-webkit-autofill { box-shadow: 0 0 0 1000px #3b3d40 inset !important; -webkit-text-fill-color: #fff; }
雖然覆蓋了:-internal-autofill-selected的默認背景色,但#3b3d40還是有顏色,不是完全透明。
最后終於找到了解決方法:
/deep/ input:-internal-autofill-previewed, /deep/ input:-internal-autofill-selected { -webkit-text-fill-color: #FFFFFF !important; transition: background-color 5000s ease-in-out 0s !important; caret-color: #fff; }
相當於把背景色隱藏了。
