-webkit-autofill 样式不生效是因为其权重等效内联样式（1000级），需用具体选择器链+所有属性加!important+超长transition禁用闪烁，且须覆盖:hover/:focus/:active等全部状态。
为什么 -webkit-autofill 样式总不生效？
Chrome 对自动填充表单字段（如 input[type="password"] 或已保存的邮箱/密码输入框）会注入一层隐藏的 -webkit-autofill 伪类样式，它自带高权重背景、颜色和过渡效果。你写的普通 CSS 规则几乎立刻被它压掉——不是代码没加载，而是浏览器在渲染后期悄悄叠加了一层“不可见但极强”的样式。
常见错误现象：background-color: transparent !important 写了却还是黄色背景；color: #333 生效了但文字一闪后又变黑；用 input::after 之类伪元素试图覆盖，完全没反应。
根本原因在于：-webkit-autofill 不是普通伪类，它由 WebKit 渲染引擎在 autofill 阶段动态注入，其内部规则权重等效于内联样式（1000 级），且部分属性（如 box-shadow、transition）会强制重置你已设的值。
覆盖 -webkit-autofill 的唯一可靠写法
必须同时满足三个条件：选择器足够具体 + 属性带 !important + 声明顺序靠后（或用 :not(#nonexistent) 强制提升权重）。只写 input:-webkit-autofill 是不够的。
- 使用完整选择器链，例如：
input[type="text"]:-webkit-autofill或#login-form input:-webkit-autofill - 所有要覆盖的属性都必须加
!important，包括background-color、color、font-size - 必须禁用默认过渡，否则会出现“先黄后透明”的闪烁：
transition: background-color 5000s ease-in-out 0s（用超长 duration 模拟禁用） - 如果目标 input 还有其他 class（如
.form-control），建议一并带上：.form-control:-webkit-autofill
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
background-color: #ffffff !important;
color: #333 !important;
font-size: 14px !important;
transition: background-color 5000s ease-in-out 0s !important;
}
为什么 !important 有时也不管用？
不是 !important 失效，而是你漏掉了以下任一环节：
- 没覆盖所有状态伪类（
:hover/:focus/:active），Chrome 会在不同交互阶段重新应用 autofill 样式 - 使用了简写属性（如
background），而 autofill 可能单独设置了background-color和background-image，导致简写被部分覆盖 - CSS 文件加载顺序靠前，被后续第三方库或页面内联样式覆盖（检查 Chrome DevTools 的 Styles 面板里该规则是否被划掉，并悬停看 override 来源）
- 目标 input 被 Shadow DOM 封装（如某些 UI 组件库），此时
-webkit-autofill在 shadow boundary 外无效，需在组件内部样式中处理
扩展场景：配合 content script 注入时的坑
如果你在浏览器扩展中通过 content_scripts 注入 CSS 覆盖 autofill，注意：
-
run_at: "document_idle"通常不够早——autofill 样式可能已在 DOM 加载前就注入，应改用"document_start" - 若页面 JS 动态创建 input（如 SPA 路由切换后），需监听
input元素插入，或用 MutationObserver 补充注入 - 不要依赖
all: unset或initial，它们对-webkit-autofill无效，反而可能破坏其他继承行为
真正起作用的永远是那几行带 !important 和超长 transition 的规则，其余优化都是锦上添花。别指望靠选择器嵌套深度赢过 WebKit 的内置逻辑——它不按常理出牌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
