背景:使用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; }
相当于把背景色隐藏了。