一招解决输入框auto complete时背景颜色问题

/** 解决浏览器自动填充将内容区域的背景色变为白色的问题 */
/deep/ input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    
    
  -webkit-box-shadow: 0 0 0 1000px #1353a2 inset !important; // 背景色
  -webkit-text-fill-color: #fff !important; // 字体颜色
}
  • 我们在这里所做的只是选择伪元素“自动填充”,然后在其内部应用一个巨大的框阴影,因此背景将被框阴影插图覆盖
  • 然后通过属性text-fill-color为white设置文字颜色

也可以使用autocomplete="off"关闭自动填充,但我实验好像没什么卵用

 <el-input
  size="medium"
  autocomplete="off"
  clearable
  @keyup.enter.native="login"
  placeholder="请输入账号"
  v-model="form.name"
></el-input>