首页 > 其他 > 详细

彻底解决chrom浏览记住密码的黄色背景

时间:2020-11-28 19:47:34      阅读:36      评论:0      收藏:0      [点我收藏+]

用原生的写一个登陆界面的时候,记住密码后就会出现一个很恶心的黄色背景,这是因为浏览器默认的给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组件分开

彻底解决chrom浏览记住密码的黄色背景

原文:https://www.cnblogs.com/pengfei25/p/14053208.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!