vue 修改浏览器自动填充密码后的el-input样式

浏览器记住密码后, 下次自动填充密码, 输入框的样式会被修改,解决方法:

html 复制代码

 <el-input v-model="loginForm.password" placeholder="用户名" class="transparent-input">
 </el-input>
 <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="密码"
          class="transparent-input"
        >
 </el-input>

css 复制代码

<style>
/* 自动填充样式修改为透明背景和白色文字 */
.el-input__inner:-webkit-autofill,
.el-input__inner:-webkit-autofill:hover,
.el-input__inner:-webkit-autofill:focus,
.el-input__inner:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  transition: background-color 9999s ease-out 0s !important;
  caret-color: #fff !important;
}
/* 输入框动画效果 */
.input-focus-animation {
  transition: all 0.3s ease;
}
.input-focus-animation:focus-within {
  transform: translateY(-2px);
}
/* 透明输入框样式 */
.transparent-input {
  background-color: transparent !important;
  border: none !important;
  color: #fff !important;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
.transparent-input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}
.transparent-input:focus {
  outline: 0 !important;
  -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}
</style>