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效果,此时还是会有背景色)
选择哪种方法,大家可以根据实际情况取舍