中央广播电视总台光华路办公区独立站优化

用图说话↓↓↓

 首先用代码解决黄色背景问题，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;}

密码框同样如此，不在一一赘述，至此，成功的解决了自动填充出现背景色影响用户体验的问题

觉得有用的朋友可以点点关注！