bootstrap 5浮动标签依赖:placeholder-shown伪类与input+label相邻选择器，label必须在input后且input必须含placeholder属性（如placeholder=" "），否则浮动失效；其本质是用placeholder作为空状态信号驱动label上浮，而非动画placeholder本身。
用 HTML5 的 placeholder 配合 CSS 实现浮动提示，核心不是“动画 placeholder”，而是用它作为状态信号，驱动 label 标签上浮。真正的浮动效果发生在 label 上，placeholder 本身只是隐性开关。
为什么必须用 placeholder 属性
:placeholder-shown 是一个伪类，它只在满足两个条件时生效：
— 输入框有 placeholder 属性（哪怕值是空格 " "）
— 当前输入框内容为空（不含可见字符，也不含全角空格、零宽字符等）
没有这个属性，:placeholder-shown 永远不匹配，整个浮动逻辑就失效。
HTML 结构要点
标签必须紧跟在 input 后面，且用相邻兄弟选择器（+）连接：
注意：
— placeholder=" " 写一个空格即可，不显示文字但能激活伪类
— label 必须用 for 关联 input 的 id，保证可访问性
— 不要嵌套 label 和 input，否则 CSS 选择器会失效
CSS 状态组合逻辑
浮动效果需覆盖三种关键状态，仅靠 :placeholder-shown 不够：
-
空且未聚焦：用
input:placeholder-shown + label→ label 在框内，小字号、浅色 -
已输入或聚焦中：用
input:focus + label或input:not(:placeholder-shown) + label→ label 上浮、缩小、变色 -
已输入但失焦：用
input:not(:placeholder-shown):not(:focus) + label→ label 保持上浮，不掉回
所有 label 都要加 pointer-events: none，否则会遮挡点击区域。
动画与兼容性提醒
过渡动画写在 label 上最稳妥，例如：
label {
transition: transform 0.2s ease, color 0.2s ease;
transform: translateY(1.5rem) scale(0.75);
}
注意：
— IE 完全不支持 :placeholder-shown，Edge 16+ 才开始支持
— 粘贴清空、输入不可见字符（如 ）等场景无法触发状态切换
— 如需完整健壮性，仍需 JavaScript 补充监听 input 事件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
