:placeholder-shown无法单独实现浮动标签因仅在有placeholder且未聚焦、无内容时生效，输入空格即失效；需组合:not(:placeholder-shown)和:focus-within覆盖全状态。
placeholder-shown伪类为什么不能直接控制浮动标签位置
因为 :placeholder-shown 只在输入框有 placeholder 且未获得焦点、也未输入任何内容时才匹配。一旦用户开始打字，哪怕只输一个空格，它就立刻失效——而浮动标签需要的是“有内容”或“聚焦中”两种状态都保持上浮，仅靠它无法覆盖完整交互周期。
常见错误现象：:placeholder-shown + label 写法看似能上浮，但输入第一个字符后标签瞬间掉回原位；或者用 :focus-within 补救，却忽略了初始空值时的显示逻辑。
- 必须组合使用
:placeholder-shown、:focus-within和:not(:placeholder-shown) -
:not(:placeholder-shown)是关键：它在有内容（哪怕全是空格）时生效，比:valid更可靠，不依赖required - 不要用
input:empty—— 它根本不存在，CSS 没有这个伪类
如何用纯CSS实现输入即上浮+聚焦保持+空值回落
核心是把三种状态拆解成独立规则，并用层叠顺序保证优先级。标签默认静止在输入框下方，通过 transform 上移，同时缩小字号、改变颜色。
input:not(:placeholder-shown) + label,
input:focus-within + label {
transform: translateY(-1.5rem) scale(0.85);
color: #333;
}
input:placeholder-shown + label {
transform: none;
color: #999;
}
- 顺序不能颠倒：
:placeholder-shown必须放在最后，否则会被前面的规则覆盖 -
input:focus-within + label覆盖聚焦但内容为空的情况（比如刚点进去还没打字） - 注意
input和label必须是相邻兄弟关系，否则+选择器不生效 - 如果 input 包在 div 里，label 放外面，那得改用
:has()—— 但目前 Safari 15.4+ 才支持，兼容性差，不推荐
为什么 input 值为空格时 label 仍应上浮
用户习惯性按空格再删，或粘贴带首尾空格的内容，此时 :placeholder-shown 已失效，但业务上这不算“空值”。若只依赖 placeholder 状态，会导致 UI 与实际校验逻辑错位。
立即学习“前端免费学习笔记（深入）”；
- 用
:not(:placeholder-shown)而非:valid，避免被 required 或 pattern 干扰 - 如果后端要求 trim 后为空才算空，前端 CSS 层面无法感知 trim 结果，所以最稳妥策略就是“只要 DOM value 非空字符串（length > 0），就上浮”
- 可加 JS 辅助：监听
input事件，动态加 class，但纯 CSS 方案已足够覆盖 95% 场景
移动端 iOS Safari 的 placeholder-shown 兼容陷阱
iOS 15.4 之前，Safari 对 :placeholder-shown 的触发极其敏感：软键盘弹出瞬间、甚至 focus 动画未完成时，它就可能提前消失，导致 label 闪动。
- 临时缓解：给
input加autocomplete="off"，减少自动填充干扰 - 更稳做法：放弃
:placeholder-shown初始状态判断，统一用 JS 控制 class，CSS 只负责动画过渡 - 如果坚持纯 CSS，至少加
transition: transform 0.2s ease，掩盖状态切换抖动 - 别信 Can I Use 上的“部分支持”描述——实际表现是“偶发失效”，必须真机测试
