针对Element UI 浏览器自动填充账号密码导致的白色背景问题修复方案，这是CSS自动填充样式覆盖的经典问题

这个问题很常见，根源是浏览器对自动填充表单的默认 -webkit-autofill 伪类样式覆盖了 Element UI 的默认样式，优化核心是针对性覆盖该伪类样式。

一、核心优化方案（Vue 项目适用）

通过样式穿透（/deep/ 或 :v-deep）定位到 el-input 内部的 input 元素，覆盖浏览器自动填充的默认样式。

具体代码：

<el-input type="password" class="no-autofill-bg">
// 修复自动填充背景色
:deep(.no-autofill-bg) {
  .el-input__wrapper {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1) inset,
      0 0 0 1000px rgba(4, 44, 133, 0.7) inset !important;

    &:-webkit-autofill {
      -webkit-text-fill-color: #fff !important;
      transition: background-color 5000s ease-in-out 0s !important;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 0 0 1000px rgba(4, 44, 133, 0.7) inset !important;
    }

    &:-webkit-autofill:focus {
      -webkit-text-fill-color: #fff !important;
      box-shadow:
        0 0 0 1px #409eff inset,
        0 0 0 1000px rgba(4, 44, 133, 0.9) inset !important;
    }
  }

  .el-input__inner {
    &:-webkit-autofill {
      -webkit-text-fill-color: #fff !important;
      transition: background-color 5000s ease-in-out 0s !important;
    }
  }
}

代码解释:

1. 外层选择器 :deep(.no-autofill-bg)

• :deep() 是 Vue 3 中的深度选择器 ，用于穿透组件的样式隔离（Vue 的 Scoped CSS 会限制样式仅作用于当前组件）。这里表示：要修改类名为 no-autofill-bg 的元素内部 的子组件样式（这里特指 Element UI 的 el-input 组件）。
• 作用：让后续样式能影响到 el-input 组件内部的 DOM 结构（因为 el-input 是独立组件，默认情况下父组件的 Scoped CSS 无法修改其内部样式）。

2. .el-input__wrapper 样式（输入框外层容器）

el-input__wrapper 是 Element UI 中输入框的外层容器类名，用于控制输入框的整体容器样式。

• 基础样式：

  css

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,  /* 1px 白色半透明内边框（模拟边框效果） */
    0 0 0 1000px rgba(4, 44, 133, 0.7) inset !important;  /* 大尺寸内阴影模拟背景色（深蓝色半透明） */

  • 用 inset 内阴影模拟背景色和边框：因为内阴影的优先级高于默认背景，且可以避免某些场景下背景色被覆盖的问题。
  • !important 强制优先级，确保覆盖 Element UI 的默认样式。

• : -webkit-autofill 伪类（输入框被自动填充时）：浏览器自动填充（如记住的账号密码）时，WebKit 内核会默认给输入框添加黄色背景和特定文本色，这里用于覆盖默认样式：

  css

  -webkit-text-fill-color: #fff !important;  /* 强制自动填充时文本为白色 */
  transition: background-color 5000s ease-in-out 0s !important;  /* 关键技巧：通过极长过渡时间阻止默认黄色背景（浏览器自动填充会触发背景色变化，这里让变化延迟5000秒，相当于"冻结"背景） */
  box-shadow: ...;  /* 保持和基础样式一致的内阴影（确保自动填充时背景不变） */

• : -webkit-autofill:focus 伪类（自动填充状态下且输入框获焦时）：当自动填充的输入框被点击（获得焦点）时，进一步调整样式：

  css

  box-shadow:
    0 0 0 1px #409eff inset,  /* 1px 蓝色内边框（Element UI 主题色，突出焦点状态） */
    0 0 0 1000px rgba(4, 44, 133, 0.9) inset !important;  /* 背景色加深（比非焦点时更深的蓝色） */

3. .el-input__inner 样式（输入框内部输入元素）

el-input__inner 是 Element UI 中输入框内部实际的 <input> 标签类名，用于控制输入框本身的样式。

• : -webkit-autofill 伪类：补充控制输入框元素本身的自动填充样式，确保文本色和背景过渡与外层容器一致：

  css

  -webkit-text-fill-color: #fff !important;  /* 强制文本为白色（和外层保持一致） */
  transition: background-color 5000s ease-in-out 0s !important;  /* 同样阻止默认黄色背景 */