:placeholder-shown不能单独驱动浮动标签动画，因其仅在input有placeholder且内容严格为空时匹配，用户输入（含空格）或聚焦即失效，无法维持“已输入”或“聚焦中”的上浮状态，须配合:focus-within、:not(:placeholder-shown)或JS事件监听。
为什么 :placeholder-shown 不能直接驱动浮动标签动画
因为 :placeholder-shown 只在输入框有 placeholder 且内容为空时生效，一旦用户开始输入（哪怕只打一个空格），伪类就立刻失效——而浮动标签需要“输入后保持上浮”状态。:placeholder-shown 本身不感知 value 变化，也不响应 focus，纯靠它无法维持标签的“已激活”视觉态。
必须搭配 :focus-within 或 JavaScript 监听 input 事件
浮动标签的核心逻辑是：标签要上浮当且仅当输入框非空 或 正在聚焦。CSS 中最简洁的方案是用父容器 + :focus-within：
<div class="input-group"> <label>邮箱</label> <input type="email" placeholder="example@domain.com"> </div>
对应 CSS：
.input-group label {
position: absolute;
top: 0;
transition: transform 0.2s ease, color 0.2s ease;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group:focus-within label {
transform: translateY(-1.2em) scale(0.85);
color: #007bff;
}
-
:focus-within确保聚焦时标签上浮，兼容所有 input 类型（包括 type="number" 这类无 placeholder 的） -
:not(:placeholder-shown)捕获用户输入后 placeholder 隐藏的瞬间，作为 fallback - 注意顺序：
:focus-within要放在最后，避免被:not(:placeholder-shown)覆盖 - Chrome 65+、Firefox 61+、Safari 15.4+ 支持
:focus-within；IE 完全不支持，需降级方案
placeholder 内容为空时 :placeholder-shown 不触发
如果 或 placeholder 属性根本不存在，:placeholder-shown 永远不会匹配。浮动标签依赖 placeholder 存在来判断“初始空态”，所以：
- 必须显式设置
placeholder属性，哪怕只是空格placeholder=" " - 不要用
value=""+placeholder混用去“模拟”空态——:placeholder-shown只看 placeholder 是否显示，不看 value - React/Vue 等框架中动态控制 placeholder 时，确保首次渲染就有值，否则初始态丢失
移动端 Safari 的 placeholder 渲染延迟问题
iOS 15.4+ 修复了大部分问题，但旧版 Safari 在快速输入/删除时，:placeholder-shown 状态可能滞后 1–2 帧，导致标签“抖动”。稳妥做法是加一点防抖过渡：
.input-group label {
transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
color 0.25s ease;
}
关键点：
- 避免用
transition: all，只对transform和color做过渡，防止 layout 触发重排 - 不用
opacity控制显隐——它无法触发硬件加速，且与浮动语义冲突 - 真机测试务必覆盖 iOS 14.x，那个版本 placeholder 显示逻辑和桌面端差异最大
真正麻烦的不是怎么让标签浮起来，而是怎么让它浮得稳、落得准、不抢焦点、不遮文字——这些细节藏在 transition 曲线、父容器定位和 placeholder 存在性里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
