应使用:placeholder-shown实现浮动标签当且仅当输入框有placeholder属性且值为空时，它作为纯css空状态探测器适用于轻量表单，需配合:focus-within确保聚焦时标签上浮，用transform而非top/margin实现顺滑动画，并注意兼容性与移动端适配。
什么时候该用 :placeholder-shown 做浮动标签
只有当输入框有 placeholder 属性，且当前值为空（input.value === ''）时，:placeholder-shown 才会匹配。它不是监听聚焦或输入事件的替代品，而是纯 CSS 的“空状态探测器”。适合轻量级表单（比如登录页邮箱/密码字段），不适合需要实时响应内容长度、或兼容 IE 的场景——它在 Safari 12+、Chrome 47+、Firefox 51+ 才稳定支持。
:placeholder-shown 和 :focus-within 必须配合用
单独靠 :placeholder-shown 只能判断“是否还显示 placeholder”，但用户点击输入框后，placeholder 消失，标签却可能还沉在底部。必须叠加 :focus-within（作用于 label 或包裹容器）才能让标签在聚焦时也保持上浮。
- 错误写法：
input:placeholder-shown + label { transform: translateY(0); }—— 焦点进入但无输入时，placeholder 已隐藏，规则失效 - 正确结构：把
input和label包进一个div，对这个div同时写&:placeholder-shown和&:focus-within - 示例 HTML：
<div class="field"> <input type="text" placeholder="邮箱"><label>邮箱</label> </div>
浮动动画要加 transform 而不是 top/margin
用 top 或 margin-top 触发动画会导致重排（reflow），卡顿明显；transform 由 GPU 加速，更顺滑。同时记得加 transition 到父容器上，而不是只加在 label 上——否则初始渲染时标签没动，第一次聚焦就跳变。
- 关键 CSS：
.field { position: relative; transition: all 0.2s ease; } .field label { position: absolute; top: 0.75em; left: 0.5em; font-size: 0.875em; color: #999; } .field:placeholder-shown label, .field:focus-within label { transform: translateY(-1.25em) scale(0.85); background: #fff; padding: 0 0.25em; } - 注意
background: #fff和padding是为了遮住下方输入框的边框，不然标签上浮后边框会穿出来 - 如果输入框有
border-radius，标签上浮后圆角处可能露白，这时得给label加border-radius对齐
真实项目里最容易漏掉的三件事
伪类浮动标签看着简单，上线后常出问题的地方很具体：
- 没处理
value非空但用户删光了内容的情况——此时:placeholder-shown仍生效，但 JS 可能已清空placeholder，导致样式断层；建议保留placeholder不删，靠 JS 控制逻辑 - 移动端软键盘唤起后，页面缩放或滚动可能让
label错位，加will-change: transform到label能缓解渲染异常 - 用 Vue/React 动态绑定
placeholder时，如果 placeholder 字符串是空字符串（""），:placeholder-shown不触发；必须确保它是undefined或带空格的字符串（如" "）才能维持匹配
真正麻烦的不是写对那几行 CSS，而是让这个“空状态”在各种输入、清空、切换、刷新路径下都稳住——它本质是个视觉契约，而浏览器只管按规范执行，不管你要不要这契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
