微信公众号运营模式,网站模板佳好乐云seo,长春百度推广电话,网站推广有哪些手段用图说话↓↓↓ 首先用代码解决黄色背景问题#xff0c;box-shadow颜色设置透明即可#xff0c;延时渲染时间可修改为更久
:deep(input:-webkit-autofill) {box-shadow: 0 0 0 1000px transparent !important;/* 浏览器记住密码的底色的颜色 */-webkit-text-fill-color: #f…用图说话↓↓↓ 首先用代码解决黄色背景问题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 propusernameel-input classuser v-modelruleForm.username :placeholder$t(LP.username) typetextautocompleteoff //el-form-itemel-form-item proppasswordel-input classpassword v-modelruleForm.password :placeholder$t(LP.password)typepassword autocompleteoff //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;}
密码框同样如此不在一一赘述至此成功的解决了自动填充出现背景色影响用户体验的问题
觉得有用的朋友可以点点关注
