chrome/safari/edge为保障敏感字段可读性，用高权重内建样式层强制覆盖input样式；:-webkit-autofill仅能通过!important稳定修改color、background-color等少数属性，而padding、border-radius等会被静默丢弃。
为什么 :-webkit-autofill 会强行覆盖 input 的颜色和背景？
因为 Chrome/Safari/Edge 在自动填充时，会用一层独立的、高权重的内建样式层覆盖你写的 CSS，且这个层的 specificity 高到几乎无法被常规选择器击败。它不是 bug，是浏览器为保障密码/信用卡等敏感字段可读性而做的强制干预。
:-webkit-autofill 能改哪些样式？哪些改了也白费？
它只允许你覆盖极少数属性，且必须用 !important 才生效（否则直接被忽略）：
-
color、background-color、border-color—— 安全可用，但 background-color 在某些 Chrome 版本里仍可能闪烁 -
font-size、font-family、text-align—— 多数版本支持，但 Safari 16.4+ 开始部分失效 -
padding、margin、border-radius、box-shadow—— 写了也白费，浏览器静默丢弃，DevTools 里看不到报错 -
background-image、background（简写）—— 极不稳定，iOS Safari 下常回退为纯色或透明
如何让 :-webkit-autofill 样式真正生效？
光写 input:-webkit-autofill { color: red; } 几乎肯定失败。关键在三点：
- 必须加
!important：比如color: #333 !important;，否则浏览器内建样式优先级更高 - 避免用简写
background，改用background-color；同理，用border-color而非border - 如果用了 CSS-in-JS 或
<style scoped></style>，需确保规则全局注入，否则伪类不匹配（Vue 中要用:deep(input:-webkit-autofill)） - 某些旧版 Chrome 对
transition有冲突，autofill 后再手动输入可能卡住动画，建议禁用：transition: none !important;
为什么 autofill 后 placeholder 还在？怎么让它消失？
这是常见错觉：placeholder 没“还在”，而是 autofill 值没真正触发 :placeholder-shown 状态切换。Chrome 填完后 DOM value 已更新，但某些情况下 input 仍被判定为“空”。
- 最稳解法是监听
animationstart事件（Chrome autofill 会触发一个匿名动画），然后强制重置input的value并调用input.dispatchEvent(new Event('input', { bubbles: true })) - 或者用
input:-webkit-autofill + label::after这类相邻组合器做视觉遮罩（不推荐，兼容性差） - 别依赖
:placeholder-shown:not(:-webkit-autofill)，这个组合在 Safari 下基本无效
真正难搞的不是写对样式，而是 autofill 行为本身不可预测：它可能延迟触发、可能不触发、可能在 form reset 后残留。与其死磕，不如在关键表单（如登录页）用 JS 主动检测 input.matches(':autofill')（Chrome 101+ 支持）并做降级处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
