浮动标签颜色改不动是因为浮起的标签实为::placeholder伪装，需同步修改.form-control::placeholder的color、font-size和opacity；聚焦变色需用:focus+label选择器且label必须紧邻input；深色模式下须额外重置::placeholder颜色与opacity。
浮动标签颜色为什么改不动？
因为 Bootstrap 5 的 form-floating 标签颜色不是由 .form-label 直接控制的——它靠的是 .form-control::placeholder 的视觉伪装。你调大 .form-label 字体、改颜色，只影响初始未聚焦状态；一旦输入框获得焦点或有内容，上浮的“标签”其实是 placeholder 文字被 CSS 拉上去的，所以真正要动的是 ::placeholder。
常见错误现象：
- 加了
color: red到.form-label，但标签浮起来后还是灰色 - 用了
!important强刷.form-label，结果静止态和浮动态颜色不一致，视觉断裂 - 深色模式下标签突然看不清，没意识到
::placeholder在暗色下默认灰度太低
怎么安全改浮动后的标签颜色？
必须同步覆盖 .form-control::placeholder 的 color、font-size 和 opacity（Firefox 需显式设 opacity: 1）。推荐用更具体的选择器避免被 Bootstrap 默认规则压掉：
.form-floating .form-control::placeholder {
color: #2563eb;
font-size: 0.875rem;
opacity: 1;
}
注意点：
- 别只写
::placeholder，否则可能影响非浮动场景的其他 input - 如果用了自定义字体大小，务必让
::placeholder和.form-label的font-size一致，否则浮起时文字缩放突兀 - 深色模式下需额外加媒体查询：
@media (prefers-color-scheme: dark)或配合[data-bs-theme="dark"]单独设色
聚焦时标签变色怎么做？
Bootstrap 本身没提供 “聚焦时 label 变色” 的类，得靠 CSS 状态组合实现。关键在于监听 .form-control:focus，再向上找相邻的 label ——但注意：label 必须在 input 后面，才能用 + 选择器捕获：
.form-floating input:focus + label,
.form-floating textarea:focus + label {
color: #1d4ed8;
}
使用前提：
- HTML 中
label必须紧接在input或textarea之后（不能隔元素） - 不要对
select尝试这个逻辑，它没有真正的 :focus + label 浮动动画，该选择器无效 - 若用了表单验证类如
.is-invalid，它的红色边框会干扰视觉，建议同时微调.is-invalid + label的颜色以保持协调
深色模式下浮动标签发灰怎么办？
Bootstrap 5.3+ 的深色模式变量不会自动适配 ::placeholder，默认值在暗背景下对比度极低。最简方案是直接在深色作用域里重置：
[data-bs-theme="dark"] .form-floating .form-control::placeholder {
color: #93c5fd;
}
或者用系统偏好检测（兼容未手动切主题的用户）：
@media (prefers-color-scheme: dark) {
.form-floating .form-control::placeholder {
color: #93c5fd;
}
}
容易忽略的细节：
- 仅设
color不够，深色模式下 placeholder 的opacity常被浏览器默认压到 0.5，必须显式写opacity: 1 - 如果项目用了 Sass 编译，优先在变量层覆盖
$form-floating-label-opacity和$form-floating-label-font-size，比 CSS 覆盖更干净 - textarea 在深色模式下若设了固定
height，浮动标签可能被截断，需检查line-height和padding是否匹配
