bootstrap 5浮动标签依赖:placeholder-shown伪类触发，非css样式驱动；改字号需调.form-control::placeholder字体大小，input必须带placeholder属性（可为空），select需加disabled占位option，所有控件必加form-control类。
Bootstrap 5 的浮动标签（.form-floating）不是靠“设置样式”来驱动浮动行为的，而是由 :placeholder-shown + 相邻选择器 + 结构语义共同触发的伪类动画。你无法用 CSS 改变它的浮动逻辑、触发时机或动画曲线，但可以安全干预两个地方：视觉表现和结构容错。
为什么直接改 .form-label 字体大小没用？
因为浮动状态下的“标签文字”根本不是 .form-label 渲染出来的——它是 .form-control::placeholder 经过缩放、位移、变色后模拟出的视觉效果。原始 <label></label> 只是定位锚点，浮动后实际不可见。
- 想调浮动标签字号，必须改
.form-control::placeholder { font-size: 0.875rem; } - 想调颜色，得同时设
color和opacity: 1（Firefox 默认opacity: 0.5） - 深色模式下要单独加媒体查询：
@media (prefers-color-scheme: dark) { .form-control::placeholder { color: #adb5bd; } }
input 必须带 placeholder 属性，哪怕为空
浮动逻辑依赖 :placeholder-shown 伪类判断输入框是否为空。没有该属性，整个链路就断了——标签永远卡在框里不动。
- 正确写法：
<input type="text" class="form-control" id="name" placeholder="">（空字符串也行） - 错误写法：
<input type="text" class="form-control" id="name">（无 placeholder 属性） - 别指望 JS 动态加
placeholder属性能补救——CSS 伪类只认初始 HTML 属性
select 和 textarea 的浮动行为差异很大
select 没有原生 placeholder，Bootstrap 只能用绝对定位把 <label></label> “压”进控件左上角，它不响应 :focus 或 :not(:placeholder-shown)，所谓“浮动”只是静态位置模拟。
-
textarea完全支持:placeholder-shown，行为和input一致，但要注意：rows="3"或固定height可能导致 label 上浮时被截断 - 推荐给
textarea设min-height+resize: vertical，避免父容器overflow: hidden裁切上浮标签 -
select若硬套.form-floating，务必加一个<option selected disabled></option>占位，否则 label 定位易偏移
真正容易被忽略的点是：所有浮动控件都必须带 form-control（或 form-select）类，漏掉会导致边框塌陷、字体错乱、动画不触发——这不是可选修饰，而是样式依赖的基础类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
