input:-webkit-autofill是唯一可靠选择器，需配合box-shadow遮罩、-webkit-text-fill-color、全交互态伪类及超长transition实现稳定样式控制。
input:-webkit-autofill 是唯一能真正生效的选择器
标准的 :autofill 在 Chrome、Edge、Safari 等主流 WebKit/Blink 浏览器里基本不生效——它们只认 input:-webkit-autofill。Firefox 目前既不支持 :-webkit-autofill，也不稳定支持标准化的 :autofill，但它的自动填充几乎不加背景色，所以实际无需处理。别浪费时间写 input:autofill 单独规则，它在生产环境里大概率被忽略。
background-color 直接设置大概率失败
浏览器对自动填充状态应用了极高优先级的内部样式（有些版本甚至带 !important），单纯写 background-color: #fff 很可能无效。这不是你选择器写错了，是浏览器在“硬覆盖”你的声明。
- 必须用
box-shadow: 0 0 0 1000px #fff inset替代：它不改背景，而是在内容层下方画一个纯色遮罩，视觉上等效且绕过优先级限制 -
spread-radius（第三个 0 后面的值）必须足够大，比如1000px，否则缩放或宽输入框下会露底色 - 别只写
input:-webkit-autofill，漏掉交互态会导致 hover/focus 时闪回黄色：input:-webkit-autofill:hover、input:-webkit-autofill:focus、input:-webkit-autofill:active都得一起写
文字颜色必须用 -webkit-text-fill-color
填完后 color 属性经常失效，浏览器会强制套用自己的文字色（比如深灰或黑得发暗），导致可读性差。这时候只能靠 WebKit 专属属性。
- 必须显式写
-webkit-text-fill-color: #333，并加!important - 即使你同时写了
color: #333，也挡不住浏览器对已填充文字的接管 - placeholder 不受影响，不用额外处理
::placeholder
transition hack 不是炫技，是防止视觉跳变
不加过渡控制的话，用户点击输入框瞬间，背景/文字色可能突变，体验割裂。这不是为了动画效果，而是让变化“慢到看不见”。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
transition: background-color 5000s ease-out, color 5000s ease-out !important - 数值拉长到 5000 秒不是 bug，是 trick：人眼无法感知这种超长缓动，等于视觉上“冻结”了状态切换
- 旧版 iOS Safari 对
transition-delay支持差，所以别依赖 delay，只靠 duration 拉长才真正跨设备稳定
真正容易被忽略的是：这个伪类只对 autocomplete 值合理、且已被浏览器实际填充的 input 元素生效；如果字段没被填、或者 autocomplete="off" 被浏览器无视了但值没注入，:-webkit-autofill 就不会匹配——它不预测，只响应。
