Chrome/Edge中:autofill常不生效，因其仅为私有实现且仅在聚焦或hover时触发；浏览器强制添加不可覆盖背景层，需用-webkit-autofill配合-webkit-text-fill-color和内阴影box-shadow才能稳定生效。
Chrome/Edge 中 :autofill 为什么经常不生效
因为 :autofill 在 Chromium 系列浏览器里不是标准伪类，而是私有实现，且**只在元素处于聚焦或 hover 状态时才触发样式**。用户填完就点走，焦点一失，样式瞬间回退——你写的 input:autofill { background-color: #fff; } 看似合理，实际几乎看不到效果。
更麻烦的是：浏览器给 autofill 状态加了一层「不可覆盖的背景渲染层」，background-color 直接被忽略，哪怕加 !important 也常无效。
所以别指望靠 :autofill 单独干活，得用带前缀的 :-webkit-autofill，并配合其他手段绕过限制。
input:-webkit-autofill 必须搭配的三样东西
稳定生效的最小可行组合就这三项，缺一不可：
-
-webkit-text-fill-color: #333 !important;—— 不管你写了color还是用了深色主题，autofill 后文字总会被强制设成深灰或黑，必须用这个专属属性覆盖 -
-webkit-box-shadow: 0 0 0 1000px #f8f9fa inset;—— 用内阴影“画”一个纯色遮罩来模拟背景色，1000px的 spread radius 是为了确保缩放、高 DPI 下也能全覆盖 - 把伪类扩展到交互态：
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active—— 否则焦点移开瞬间就露原形
为什么不用 background-image 或 transition hack
background-image: linear-gradient(transparent, transparent) 理论上能清掉默认背景，但实测在 Chrome 128+ 和 Edge 129+ 中兼容性变差，部分输入框（比如 type="search"）会失效。
至于 transition: background-color 3600s 这类延迟过渡 trick，本质是让颜色变化慢到“看不见”，但它治标不治本：如果背景根本没被覆盖，再慢的 transition 也没用。而且 Safari 对超长 transition 值支持不稳定，有些版本会直接忽略。
真正可靠的路径只有一条：用 -webkit-box-shadow + -webkit-text-fill-color，写全状态，加 !important。
Firefox 和 Safari 怎么办
Firefox 完全不支持 :-webkit-autofill，也不认标准化的 :autofill（尽管规范已存在）。它 autofill 后通常不加背景色，视觉干扰小，基本不用处理。
Safari 从 macOS 14 / iOS 17 开始支持 :autofill，但行为极不稳定：对 type="password" 可能生效，对 type="email" 却常静默失败；且不保证 -webkit-text-fill-color 有效。如果你真要保 Safari，建议只对密码字段启用该套样式，其他字段保持默认。
最常被忽略的一点是：这些伪类只对浏览器原生 autofill 生效，第三方密码管理器（如 Bitwarden、1Password）注入的填充行为完全不受控——它们走的是 JS 注入路径，CSS 伪类拿它没辙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
