用图说话↓↓↓
首先用代码解决黄色背景问题,box-shadow颜色设置透明即可,延时渲染时间可修改为更久
:deep(input:-webkit-autofill) {
box-shadow: 0 0 0 1000px transparent !important;
/* 浏览器记住密码的底色的颜色 */
-webkit-text-fill-color: #fff !important;
/* 浏览器记住密码的字的颜色 */
transition: background-color 300000s ease-in-out 0s;
/* 通过延时渲染背景色变相去除背景颜色 */
}
但问题来了,自动填充时输入框为透明,那么图标也没了
这里有一个误区,阴影和背景色不同,调整那个1000px会发现它作用范围很广,且不在输入框内,具体的原因暂时也没参透,总之把黄色背景给消除了
接下来怎么处理图标?
我们来看下dom元素的构成
<el-form-item prop="username">
<el-input class="user" v-model="ruleForm.username" :placeholder="$t('LP.username')" type="text"
autocomplete="off" />
</el-form-item>
<el-form-item prop="password">
<el-input class="password" v-model="ruleForm.password" :placeholder="$t('LP.password')"
type="password" autocomplete="off" />
</el-form-item>
F12 打开控制面板我们可以看到
这里使用的是el-input 在渲染时会分为两部分:el-input__wrapper和el-input__inner
此时,图标应该是在输入框内部el-input__inner中,那把图标拿到外部el-input__wrapper试试?
图标和文字一定要是分开的,我们通常会使用padding给图标腾出位置
:deep(.el-input__inner){
padding-left: 30px;
}
但现在不用,我们使用margin
:deep(.user) .el-input__inner {
margin-left: 30px;
}
并且将原本在inner中的图标移动到wrapper里
:deep(.user .el-input__wrapper) {
background-image: url('../assets/login/login_user.png');
background-repeat: no-repeat;
background-position: 13px 13px;
background-color: #07397D;
}
密码框同样如此,不在一一赘述,至此,成功的解决了自动填充出现背景色影响用户体验的问题
觉得有用的朋友可以点点关注!