input 标签 autofill属性生效导致的输入框背景色变成黄色（或其他色）的解决办法

vue + elementui 登录页 输入框autofill属性导致的背景色变色问题（使用原生input也会有）

方法一：

用box-shadow效果遮住：box-shadow:0 0 0px 1000px white inset;

html代码：

  <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="80px" >
          <el-form-item label="账号名称" prop="userName">
            <el-input v-model="loginForm.userName" name="userName" @keyup.native="TRIM" @keyup.native.enter="handleLogin">
            </el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input type="password" name="password" auto-complete="off" v-model="loginForm.password"
              @keyup.native="TRIM" @keyup.native.enter="handleLogin" />
          </el-form-item>

          <el-form-item label="验证码" prop="pictureCaptcha">
            <el-input type="text" class='w_300 fl' v-model="loginForm.pictureCaptcha" @keyup.native="TRIM" @keyup.native.enter="handleLogin" />
            <img :src="codeSrc" alt="验证码" @click="getCode" style="vertical-align:middle">
          </el-form-item>
  </el-form>

 

css：

 .form {
  //autofill背景色修改
     /deep/.el-input input{
        box-shadow: 0 0 0px 1000px white inset;
      }
    }
// 如果用的是el-input,并且写在当前文件中且用了scopeed，下面写法不生效。
//我用的是el-input,所以下面的方法在scopeed中不做css穿透处理无法生效
.form input{
  box-shadow: 0 0 0px 1000px white inset;
}

修改后的效果图：

 

方法二： 亦可以去掉autofill属性

（注意：必须是无autofill效果，我的代码中去掉了，但还是会input 还是会有autofill效果，此时还是会有背景色）

 

• 选择哪种方法，大家可以根据实际情况取舍