关于 input在 chrome 、IE浏览器中遇到的兼容性问题处理

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;
}