:placeholder-shown是实现Material Design浮动标签的关键触发器，因其仅在输入框含placeholder且内容为空时匹配，精准对应“未输入”初始状态；需配合:focus和input:not(:placeholder-shown)组合控制聚焦、已输入、失焦等全状态，但不支持粘贴清空、不可见字符等边缘场景，兼容性受限（IE不支持），复杂需求仍需JS辅助。
为什么 :placeholder-shown 是实现 Material Design 浮动标签的关键触发器
因为 :placeholder-shown 只在输入框有 placeholder 且内容为空时匹配，它天然对应“未输入”状态——这正是浮动标签需要上浮的初始条件。注意：它不响应聚焦（:focus），也不管用户是否删光了文字，只看 placeholder 是否“正在显示”。一旦用户输入任意字符（哪怕是一个空格），该伪类立即失效，标签可回落或保持上浮，取决于你如何组合其他状态。
- 必须给
<input>设置placeholder属性，否则:placeholder-shown永远不生效 - IE 完全不支持，Edge 16+ 才开始支持；如需兼容旧版，得降级用 JavaScript 监听
input事件 - 不能单独靠它控制“聚焦时标签上浮”，必须和
:focus或:not(:placeholder-shown)配合使用
如何用 :placeholder-shown + :focus 实现标准浮动逻辑
Material Design 的浮动标签要求：初始时标签在输入框内（作为 placeholder 辅助），输入或聚焦后上浮到边框上方。仅靠 :placeholder-shown 不够，需叠加状态判断：
label {
position: absolute;
top: 0;
left: 0;
transition: transform 0.2s ease, color 0.2s ease;
pointer-events: none;
}
input:placeholder-shown + label,
input:not(:placeholder-shown):not(:focus) + label {
transform: translateY(1.5rem) scale(0.75);
color: #9e9e9e;
}
input:focus + label,
input:not(:placeholder-shown):focus + label {
transform: translateY(-0.75rem) scale(0.75);
color: #2196f3;
}
- 关键点是用
input:placeholder-shown + label控制“空且未聚焦”态，用input:not(:placeholder-shown):focus覆盖“已输入且聚焦”态 -
input:not(:placeholder-shown):not(:focus)处理“已输入但失去焦点”的情况——此时标签应保持上浮，不能掉回原位 - 别忘了给
label加pointer-events: none，否则会挡住输入框点击
常见失效场景和修复方式
实际写的时候，标签不动、闪动、或上浮位置错乱，大概率是这几个原因：
- HTML 结构不是
input紧邻label（必须用+或~选择器），例如中间插了<div> 就断链了 <li>placeholder 值为空字符串（<code>placeholder=""）或只含空格，浏览器不认为 placeholder “正在显示”，:placeholder-shown不触发 - 用了
required但没设 placeholder，或 placeholder 被 JS 动态清空，导致状态丢失 - transition 写在
label上但没设初始transform，动画无法插值——务必显式定义默认transform: translateY(0) - 用户粘贴内容后又全选删除 → 输入框变空，但 placeholder 不一定重新显示（取决于浏览器行为），
:placeholder-shown可能不恢复 - 带格式粘贴（如从 Word 粘入不可见字符）→
input.value看似为空，实际含\u200b或\uFEFF，:placeholder-shown不生效 - 需要支持「标签始终上浮」的只读字段或预填充字段 → 这些没有 placeholder，必须靠 class 控制
和 JavaScript 方案比，纯 CSS 的边界在哪
纯 :placeholder-shown 方案简洁，但处理不了这些情况：
立即学习“前端免费学习笔记（深入）”；
真要覆盖所有边缘 case，还是得监听 input 和 blur 事件，用 JS 显式切换 has-value 类。CSS 方案适合快速原型或对兼容性要求不高的内部工具。
