浮动标签需严格遵循.form-floating容器内input在前、label在后的dom结构，且input必须含placeholder属性；样式定制须覆盖.form-floating > label及:focus/~:not(:placeholder-shown)状态下的选择器，并注意transform-origin、z-index与伪类完整性。
浮动标签的HTML结构决定样式入口
Bootstrap 5的浮动标签依赖特定的DOM结构：.form-floating容器包裹<input>和<label></label>，且<label></label>必须在<input>之后。这是CSS能生效的前提——因为浮动逻辑靠input:focus ~ label和input:not(:placeholder-shown) ~ label这类兄弟选择器驱动。
- 如果把
<label></label>写在<input>前面，浮动失效，样式再改也没用 -
<input>必须有placeholder属性，否则:not(:placeholder-shown)不触发 - 不要给
<label></label>加for属性（它不参与浮动逻辑，反而可能干扰点击区域）
覆盖默认字体大小和颜色的关键CSS选择器
Bootstrap 5对浮动标签的样式定义集中在.form-floating > label和.form-floating > input:focus ~ label上。想改字体大小或颜色，必须提高选择器权重或用!important（后者更直接，因Bootstrap用的是高权重要素）：
.form-floating > label {
font-size: 0.875rem !important;
color: #6c757d !important;
}
.form-floating > input:focus ~ label,
.form-floating > input:not(:placeholder-shown) ~ label {
font-size: 0.75rem !important;
color: #0d6efd !important;
}
- 注意
font-size在聚焦/非空状态下会缩小，这是浮动效果的一部分，不能只改一个状态 -
color建议区分常态、聚焦态、禁用态（.form-floating > input:disabled ~ label） - 不要用
em或rem以外的单位混搭，否则响应式易错乱
调整标签位置和动画时别忽略transform-origin
浮动标签上移靠的是transform: translateY(-0.875rem) scale(0.85)，而缩放中心点默认是元素左上角，导致标签“飘偏”。修复方式是显式设置transform-origin：
.form-floating > input:focus ~ label,
.form-floating > input:not(:placeholder-shown) ~ label {
transform: translateY(-0.875rem) scale(0.85);
transform-origin: top left; /* 关键：保持对齐左侧 */
}
- 如果你改了
label的padding-left或text-align，transform-origin也要同步调，否则位移错位 - 动画时长由
transition控制，默认是all 0.2s ease-in-out，如需更顺滑可改为transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) - 避免对
label设top/margin-top，这会和transform冲突，造成跳动
自定义边框和背景色时注意层级与伪元素
浮动标签下方的输入框边框其实是input自己的border，但标签上浮后，常需让边框“贴着”新标签位置。这时不能只调input，还得处理label遮挡问题：
-
label默认z-index: 2，input是z-index: 1，所以改input边框不会被盖住 - 若想让边框在标签下方透出（比如加阴影），得给
input加position: relative和z-index: 3，同时确保label没设background - 想给标签加背景（如半透明底色），必须用
background-clip: padding-box防止圆角裁切异常
最稳妥的做法是复写整个浮动块的视觉层叠关系，而不是零散调整单个属性。
浮动标签的样式自由度其实很高，但所有改动都绕不开那两个核心伪类：:focus和:not(:placeholder-shown)。漏掉任一状态，就会出现“点进去变样、输完回弹”的断裂感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
