1、谷歌中input自动填入后会出现背景色处理
input CSS样式
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {-webkit-text-fill-color: #ededed !important;-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;background-color:transparent;background-image: none;transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间}input {background-color:transparent;}
input scss样式
input {background-color:transparent;border: 0px;-webkit-appearance: none;border-radius: 0px;padding: 12px 5px 12px 15px;color: $bg;height: 47px;// caret-color: $cursor;&:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {-webkit-text-fill-color: $bg !important;-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;background-color:transparent;background-image: none;transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间}
2、谷歌浏览器保存密码后打开页面设置input type=password后会出现自动把账号密码填进去。
解决思路，在页面初始化的时候，避免input type=“password” ,设置为text.之后在改回成text。
1、给input标签添加
autocomplete=“new-password”
2、设置input readonly=true,之后在页面加载完成后再改回readonly=false
<el-input :type="iconFlag?'password':'text'"autocomplete="new-password"v-model="form.Password":readonly="NewpasswordReadonly"placeholder="确认密码"></el-input><i class="iconfont ":class="iconFlag?'icon-biyan':'icon-zhengyan'"@click="iconFlag=!iconFlag"></i><script>mounted () {setTimeout(() => {this.NewpasswordReadonly = false // 忘记密码登录 密码框设置为readonly为false}, 500)},</script>
3、设置input type=“text” , 在页面加载完成，或者input获取到焦点的时候改为type=“password”
<el-form-item prop="surePassword"><!--初始化flag为false--><el-input :type="flag?'password':'text'"autocomplete="new-password"v-model="form.surePassword"@focus="flag=true"placeholder="确认密码"></el-input></el-form-item>
3、在IE中input password输入会出现眼睛，text出现x的处理方法
::-ms-clear,::-ms-reveal {display: none;}
