用图说话↓↓↓

 首先用代码解决黄色背景问题，box-shadow颜色设置透明即可

:deep(input:-webkit-autofill) {
	  box-shadow: 0 0 0 1000px transparent  !important;
	  /* 浏览器记住密码的底色的颜色 */
	  -webkit-text-fill-color: #fff !important;
	  /* 浏览器记住密码的字的颜色 */
	  transition: background-color 3000s 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;
	}

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

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