Chrome/Edge中:autofill无效，必须用input:-webkit-autofill配合-webkit-box-shadow: inset覆盖高优先级内阴影背景，并用-webkit-text-fill-color设文字色，且需声明全状态、内联CSS、避免依赖autocomplete="off"。
Chrome/Edge 里 :autofill 基本不生效
你写的 input:autofill { background-color: #fff; } 在 Chrome 和 Edge 中大概率没反应——不是选择器写错，而是浏览器压根不认这个标准伪类。Chromium 内核只响应 input:-webkit-autofill 这个私有伪类，且它只在 autofill 触发后、元素仍处于 :focus 或 :hover 状态时才激活。页面加载完自动填充完成、焦点移走，样式就回退了。
background-color 加 !important 也无效
这不是你 CSS 写得不够狠，是渲染层优先级问题。Chromium 把 autofill 背景色实现为一个高优先级的内阴影层（-webkit-box-shadow: inset），而非普通 background 层。background-color 即使加 !important 也会被压掉。
正确做法是用内阴影“盖住”黄色底色：
-
-webkit-box-shadow: 0 0 0 1000px #f8f9fa inset;—— 1000px 的spread-radius确保覆盖所有尺寸（含缩放） - 颜色填你想要的背景色，比如深色主题就用
#2d3748，透明背景就用rgba(255,255,255,0) - 必须加
!important，否则浏览器内置规则仍可能赢
文字颜色被强制变黑，color 属性无效
Chrome autofill 不仅锁背景，还会硬设文字色为 #222 或 #333，哪怕你写了 color: white; 也无效。这是为了保障可读性，但会破坏深色主题。
立即学习“前端免费学习笔记（深入）”；
唯一可靠覆盖方式：
-
-webkit-text-fill-color: #fff !important;—— 注意!important不可省，否则被内联样式压制 -
color属性可以保留，但只是降级兜底，不起实际作用
容易被忽略的三个坑
很多同学写了样式但没生效，往往卡在这几个地方：
- 只写了
input:-webkit-autofill，但没加:hover/:focus/:active状态，导致聚焦时黄色又冒出来 - CSS 文件异步加载或在 DOM 渲染后才注入，而 autofill 发生在页面
load阶段，样式来不及生效；建议把这段 CSS 放在<head>最顶部或内联 - 误以为
autocomplete="off"能彻底禁用 autofill —— 实际上 Chrome 从 2023 年起已基本无视该属性，尤其对密码字段；它只影响提示下拉，不影响填充行为
真正难的不是写对那几行 CSS，而是意识到：浏览器对 autofill 的样式干预是“主动渲染+强优先级”的组合拳，你得用同样底层的机制（box-shadow: inset 或 transition）去对冲，而不是试图覆盖。
