1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > input 标签 autofill属性生效导致的输入框背景色变成黄色(或其他色)的解决办法

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

时间:2019-11-08 09:31:04

相关推荐

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效果,此时还是会有背景色)

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。