使用开发者工具检查 input:-webkit-autofill 和 :autofill 伪类是否生效，结合 ua 样式判断优先级；验证 autocomplete 属性值合法性，并确保 css 同时覆盖标准与私有伪类及状态，必要时用 !important 或 -webkit-box-shadow 覆盖浏览器默认填充样式。
直接用浏览器开发者工具定位被覆盖的样式，重点检查 input:-webkit-autofill 和 :autofill 伪类是否生效，再结合用户代理样式表（UA stylesheet）判断优先级来源。
打开开发者工具，检查计算后的样式
右键输入框 → “检查”，在 Elements 面板中选中该 input 元素，切换到右侧的 “Computed” 标签页。滚动查找 background-color、color、box-shadow 这几项，看它们的实际值和来源：
- 如果 background-color 显示为浅黄色（如
#FAFFBD），且来源标注为(user agent stylesheet)或chrome://...，说明是浏览器 UA 样式在起作用 - 如果
-webkit-text-fill-color或background-color显示为“已划掉”，说明你写的 CSS 被低优先级规则覆盖了 - 注意查看是否有
!important出现在 UA 样式或你自己的规则里
确认是否命中 :autofill 或 :-webkit-autofill
在 Styles 面板中，手动给 input 元素添加一个测试类（比如 test-autofill），然后在控制台运行：
document.querySelector("input").matches(":autofill")
如果返回 true，说明标准伪类已支持；若为 false 但 Chrome 中背景变黄，则大概率只触发了 :-webkit-autofill。此时需确保你的 CSS 规则包含该私有伪类：
- 必须写全：
input:-webkit-autofill，不能只写:-webkit-autofill - 建议同时覆盖 hover/focus/active 状态：
input:-webkit-autofill:hover等 - Chrome 120+ 已支持标准
:autofill，但 Safari 和旧版 Edge 仍依赖 WebKit 版本
排查 autocomplete 属性是否意外触发填充
自动填充是否发生，取决于 autocomplete 值是否匹配浏览器保存的字段语义。检查 HTML 中：
- 是否写了
autocomplete="email"、"current-password"等合法值（注意拼写准确、小写、无连字符） - 是否误设了
autocomplete="on"或未声明，导致浏览器按默认逻辑启用填充 - 即使写了
autocomplete="off"，现代浏览器（Chrome 80+、Firefox 90+）也会忽略它——这不是 bug，而是规范行为
验证 CSS 是否真正应用成功
在 Styles 面板中，手动展开你的 CSS 规则，确认它出现在列表中且未被禁用。常见失效原因包括：
- 缺少
!important：UA 样式常带高权重，可临时加!important测试是否起效 - 背景覆盖方式错误：仅设
background-color无效，应改用-webkit-box-shadow: 0 0 0 1000px #fff inset模拟纯色背景 - 过渡延迟干扰：某些方案用
transition: background-color 3600s来“冻结”样式，但可能掩盖真实问题，调试时建议先移除
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
