CSS :placeholder-shown伪类实现悬浮占位符的原理

:placeholder-shown 并非用于“直接实现悬浮占位符”的独立方案——它本质上只是一个状态检测开关。真正驱动“上浮”视觉动作的是 label 元素，而 :placeholder-shown 的核心职责是告知浏览器：“当前 placeholder 正在显示，意味着输入框处于空状态。” 相较于依赖 :focus 或通过 JavaScript 判断 value === "" 的做法，这种机制更可靠、性能更轻量。下面我们逐步拆解其原理。

为什么必须设置 placeholder 属性才能触发 :placeholder-shown

该伪类的匹配逻辑并非“检测输入内容是否为空”，而是“检测浏览器当前是否正在渲染 placeholder 文本”。如果输入框缺少 placeholder 属性（即便设置空字符串 placeholder="" 也符合要求），浏览器将不会启用占位渲染逻辑，此时 :placeholder-shown 始终为 false。以下是一些容易被忽略的细节：

• placeholder=" "（空格）与 placeholder="" 在语法上均合法，但后者更为干净，可避免空格被误识别为实际提示文字。
• placeholder 属性必须直接写在 HTML 结构中。通过 JS 动态设置（如 input.setAttribute('placeholder', '')）在部分旧版 Safari 浏览器中可能无法正确触发该伪类。
• 移除 placeholder 属性后，即使 input 值为空，:placeholder-shown 也不会匹配——这是规范定义的行为，而非缺陷。

:placeholder-shown 与 :not(:placeholder-shown) 的分工机制

浮动标签的两个关键状态正是依靠这对伪类进行区分：

• input:placeholder-shown + label → label 保持在初始位置（即下沉状态）。
• input:not(:placeholder-shown) + label → label 执行上浮并缩放（适用于已输入内容或失去焦点但非空的情况）。
• 需注意选择器的书写顺序：:not(:placeholder-shown) 的规则必须置于 :placeholder-shown 之后，否则会被后者覆盖。
• 用户输入一个空格、全角空格或换行符时，:placeholder-shown 会立即失效。这是它相比 JS 的 trim() 方法更底层的优势，但也是一个陷阱：粘贴不可见字符可能导致“看起来为空，但标签未上浮”的情况。

为什么仅靠 :placeholder-shown 无法实现完整的浮动逻辑

该伪类只回答“placeholder 当前是否正在显示”，并不涉及“是否获得焦点”或“是否通过校验”等状态。要实现健壮的浮动标签效果，以下组合缺一不可：

• input:focus-within + label → 处理“输入框为空但已聚焦，label 应上浮”的场景。
• input:valid + label → 覆盖 required 字段校验通过后的固定上浮状态。
• 单独使用 :placeholder-shown 无法区分“空且聚焦”与“空且未聚焦”，在视觉上会遗漏一次关键的过渡动画。
• IE 浏览器完全不支持该伪类，Edge 16+ 才开始提供支持；Safari ≤15.4 存在偶发的不触发问题，需配合 ::-webkit-input-placeholder 编写回退样式。

一个真正容易被忽视的要点是：浮动效果依赖于 label 的定位上下文。如果没有为 label 设置 position: relative，那么 transform: translateY() 会以视口为基准进行偏移，导致标签“飘出屏幕”。这并非动画代码写错，而是定位链条断裂所致。