浮动标签在自动填充时背景错乱，根本原因是Chrome/Firefox通过私有伪类劫持input样式，强制覆盖background-color且不触发事件，导致Bootstrap浮动逻辑失效。
浮动标签在浏览器自动填充（autocomplete）时背景色错乱，根本原因是 Chrome/Firefox 对 input:-webkit-autofill 和 input:autofill 的私有样式劫持——它会强行覆盖你设的 background-color，且不触发 :focus 或值变更事件，导致 Bootstrap 的浮动逻辑失效。
为什么 autofill 会让浮动标签文字“消失”或背景变黄
浏览器自动填充后，input 被加上私有伪类（如 :-webkit-autofill），并注入内联 background-color: #fefecf（Chrome 黄底）或 background-color: #fff（Firefox），同时把 ::placeholder 颜色压成极浅灰。而 Bootstrap 的浮动标签依赖 input 的背景和 ::placeholder 的视觉伪装，一旦背景被强刷、placeholder 失效，label 就浮不起来或文字不可读。
- 常见错误现象：页面加载后 label 正常；用户刷新或表单提交后自动填充，label 突然沉底、文字变淡、背景发黄
- 不是 CSS 选择器没写对，是浏览器在 DOM 渲染完成后又偷偷改了 input 样式
-
!important对:-webkit-autofill内联样式基本无效，必须用更高优先级的私有伪类覆盖
用 :-webkit-autofill 强制重置 input 背景和 placeholder
必须同时覆盖 autofill 状态下的背景、文字色、placeholder 色，否则 label 浮动逻辑仍断链。重点不是“美化 autofill”，而是让它回归 Bootstrap 的预期状态。
- 给
input:-webkit-autofill显式设background-color（推荐transparent或与正常态一致的色值），并加-webkit-text-fill-color确保文字可见 - 同步重置
input:-webkit-autofill::placeholder，否则 placeholder 文字仍不可见，label 不上浮 - Firefox 需额外处理
input:autofill（虽支持度有限，但新版已逐步启用）
.form-floating input:-webkit-autofill {
background-color: #fff !important;
-webkit-text-fill-color: #212529 !important;
}
.form-floating input:-webkit-autofill::placeholder {
color: #6c757d !important;
opacity: 1 !important;
}
.form-floating input:autofill {
background-color: #fff !important;
color: #212529 !important;
}
.form-floating input:autofill::placeholder {
color: #6c757d !important;
}
确保 label 文字色在 autofill 后依然可读
即使 input 背景修复了，label 在 autofill 触发后仍可能因颜色未同步而对比度不足。Bootstrap 不会自动检测 autofill 状态去切 text-white/text-dark，得手动兜底。
立即学习“前端免费学习笔记（深入）”；
- 如果 input 用了深色背景（如
bg-dark），必须给.form-floating label加text-white，且该 class 不能被 JS 动态移除 - 避免只靠 JS 监听
input事件来补 class——autofill 发生在页面 load 后，且不触发input或change，得用DOMContentLoaded+ 定时检查:-webkit-autofill状态 - 最稳方案：直接在 HTML 中写死
<label class="text-white">（浅背景则用text-dark），不依赖 JS 干预
容易被忽略的细节：autofill 会破坏 :focus 浮动动画
Chrome autofill 后，input 可能不会自动获得焦点，导致 label 卡在“未聚焦未输入”状态（半浮半沉）。这不是 bug，是浏览器行为——autofill 不等于用户交互。
- 不要指望
input:focus + label在 autofill 后自动生效；它需要真实 focus 事件 - 若需 autofill 后立即上浮 label，可用 JS 检测
input:-webkit-autofill并手动input.focus()，但会干扰用户操作流，慎用 - 更自然的做法：接受 autofill 后 label 暂时未浮起，等用户首次点击或 tab 进入时再触发——这符合可访问性规范
真正麻烦的不是让 label 浮起来，而是让 autofill 后的整个视觉链（input 背景 → placeholder → label 位置 → label 文字色）全部对齐。浏览器私有伪类不响应 CSS 变量，也不走标准事件流，只能靠组合覆盖+提前声明+放弃部分动画妥协。
