用 :placeholder-shown + ~ 控制 placeholder 文字上浮更稳定，需 label 在 input 后、配合 input:not(:placeholder-shown) + label 保证输入后仍上浮。
placeholder文字怎么浮起来不闪跳
直接用 :placeholder-shown + ~ 邻居选择器控制标签位置，比监听 focus/blur 更稳。浏览器原生 placeholder 在聚焦瞬间会消失，如果用 JS 切换类名，容易出现 1 帧空白或错位——CSS 方案绕过了这个时机问题。
- 必须把
label放在input后面（HTML 顺序），才能用~选中它；放前面就无效 -
:placeholder-shown在输入内容后自动失效，此时 label 应保持上浮状态，所以得额外加input:not(:placeholder-shown) + label规则 - Chrome 低版本（:placeholder-shown 支持弱，若需兼容 IE，只能退到 JS 方案
transition动效卡顿或没反应
常见原因是 transition 没写全属性，或者触发条件不匹配。浮动 label 本质是改 transform 和 font-size，但只写 transition: all .2s 容易拉胯——all 会强行动画 color、border 等无关属性，拖慢渲染。
- 只过渡必要属性：
transition: transform .2s ease, font-size .2s ease - 必须给 label 设
position: relative，否则transform: translateY()不生效 - 别用
top或margin-top做浮动，它们会触发重排；transform是合成层操作，更顺滑
label文字被输入框遮住或错位
这是定位和 z-index 搞混了。label 浮起后如果层级低于 input，就会被盖住；如果没设 pointer-events: none，点击 label 还可能误触发 input 的 focus，导致 placeholder 闪一下。
- label 必须加
z-index: 2（input 默认是 auto，等价于 0） - label 加
pointer-events: none，让点击穿透到下面的 input - input 要设
padding-top，腾出空间给浮起的 label，否则文字会被裁掉
移动端点击无响应或 placeholder 消失太快
iOS Safari 对 :placeholder-shown 的触发时机更敏感，有时用户刚点进去、还没输字，placeholder 就消失了，label 还没来得及浮起。
立即学习“前端免费学习笔记（深入）”；
- 加个兜底：
input:focus + label强制浮起，覆盖 placeholder 消失过早的情况 - 避免用
opacity控制显隐，iOS 上 opacity 动画常有闪烁；用transform移出视区更可靠 - 安卓 WebView 里，某些版本需要给 input 加
-webkit-appearance: none才能正确触发伪类
真正麻烦的是 placeholder 和用户输入之间的状态边界——它既不是纯空值，也不是已输入，浏览器对它的定义本身就模糊。所以别指望一个 CSS 规则吃遍所有机型，得靠多一层 :focus 兜底，再加一点耐心调 offset。
