chrome 禁止element ui的input自动填充


背景:使用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;
}

相当于把背景色隐藏了。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM