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

相当于把背景色隐藏了。

标签：填充,chrome,deep,element,color,autofill,internal,ui,input
来源： https://www.cnblogs.com/circegu/p/15668406.html