用原生的写一个登陆界面的时候,记住密码后就会出现一个很恶心的黄色背景,这是因为浏览器默认的给input元素添加了样式
解决办法1.给密码框添加属性 readonly,然后再获得焦点的时候删除点属性
<input class="h-form__item search-form__password" type="password" name="password" placeholder="请输入密码" :style="psdback" readonly onfocus="this.removeAttribute(‘readonly‘)" v-model="ruleForm.mypwd" />
这样可以在初始化的时候就算记住了密码也不会出现黄色的字样
但是问题又来了,要是你这时候选择下拉中记住的密码,那么恶心的黄色背景又出现了
解决办法2,样式覆盖
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; border: 1px solid #CCC!important; }
设置你需要的样式
注意:能使用这两种方法解决的前提,还要在用户名和密码框小图标不能使用input的background 如果使用了 用方法2是无法解决问题,只能是将图标和input组件分开
原文:https://www.cnblogs.com/pengfei25/p/14053208.html