Chrome/Edge等Blink内核浏览器自动填充时强制添加黄色/浅蓝背景，必须用:-webkit-autofill伪类干预；常用方案是-webkit-box-shadow覆盖纯色背景，或用超大transition-delay延迟背景色生效，但需适配不同伪类和浏览器版本。
Chrome、Edge 等 WebKit/Blink 内核浏览器在 input 自动填充后，会强行套用黄色/浅蓝背景色，且优先级极高，常规 background 或 !important 都无效——必须用 :-webkit-autofill 伪类干预，否则改不掉。
用 -webkit-box-shadow 覆盖纯色背景
这是最常用也最稳妥的方案，原理是用一个超大内阴影“盖住”浏览器默认背景色。它只适用于背景为纯色（非透明、无渐变、无图片）的输入框。
-
box-shadow: 0 0 0 1000px #fff inset中的1000px是扩展半径，必须足够大以覆盖所有可能尺寸；#fff换成你实际需要的背景色 - 如果输入框有
border-radius，阴影无法完美贴合圆角边缘，会出现白边或色差，此时该方案失效 - 不能和
background: transparent共存——透明背景下，这个阴影会透出底层内容，视觉上反而更乱 - 示例写法：
input:-webkit-autofill {<br> -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset;<br> -webkit-text-fill-color: #333;<br> transition: background-color 5000s ease-in-out 0s;<br>}
用 transition-delay 延迟显示默认背景
当你的输入框背景是透明、渐变或需要保留圆角时，这个方案更合适。它不覆盖颜色，而是让浏览器“忘记”要填背景色——把过渡延迟设得极大，使自动填充后的背景色几乎永不生效。
- 必须同时作用于多个状态：
input:-webkit-autofill、:hover、:focus、:active，否则焦点切换时颜色会突然弹出 -
transition-delay: 99999s是关键，单位是秒，不是毫秒；值越大越保险，但超过100000s在某些旧版 Safari 可能被截断 - 需配合
-webkit-text-fill-color单独控制文字颜色，否则文字可能发灰或不可读 - 注意：该方案对
input:-internal-autofill-selected（Edge/新版 Chrome 的新伪类）无效，需额外补充规则
autocomplete="off" 并不能真正禁用自动填充
加 autocomplete="off" 只是提示浏览器“别填”，现代 Chrome/Edge 会忽略它，尤其对 type="password" 或带 name="password" 的字段完全无效。
立即学习“前端免费学习笔记（深入）”；
- 有些开发者尝试用随机
name或id（如name="passw0rd_123"）绕过识别，但稳定性差，且破坏表单可访问性 - 若真要禁用，唯一可靠方式是服务端生成一次性 token + JS 动态替换
type属性（例如从text切换为password），但成本高、影响无障碍 - 所以绝大多数项目仍选择 CSS 方案，而非放弃自动填充功能
透明背景或深色模式下的坑
如果你的输入框背景是 transparent 或使用了 CSS 变量（如 var(--bg)），-webkit-box-shadow 方案基本失效，而 transition-delay 方案也容易漏掉 input:-internal-autofill-previewed 这个新伪类。
- Chrome 110+ 和 Edge 117+ 已启用
input:-internal-autofill-previewed，它比:-webkit-autofill更早触发，且样式优先级更高 - 必须显式写：
input:-internal-autofill-previewed,<br>input:-webkit-autofill {<br> background-color: transparent !important;<br> -webkit-text-fill-color: inherit;<br> transition: background-color 99999s;<br>} - 深色模式下，
-webkit-text-fill-color若设为固定色（如#000），可能在暗色背景下不可读，建议用inherit或媒体查询动态适配
真正麻烦的不是写哪几行 CSS，而是不同浏览器版本对伪类的支持差异——:-webkit-autofill 在 Safari 上行为不稳定，:-internal-autofill-previewed 在旧版 Chrome 根本不存在。上线前务必在 Chrome、Edge、Safari 最新版及一个旧版（如 Chrome 95）里实测自动填充效果，光看文档没用。
