怎样使用css的:placeholder-shown控制标签浮动效果_Material Design表单-css教程-PHP中文网

:placeholder-shown是实现Material Design浮动标签的关键触发器，因其仅在输入框含placeholder且内容为空时匹配，精准对应“未输入”初始状态；需配合:focus和input:not(:placeholder-shown)组合控制聚焦、已输入、失焦等全状态，但不支持粘贴清空、不可见字符等边缘场景，兼容性受限（IE不支持），复杂需求仍需JS辅助。

怎样使用css的:placeholder-shown控制标签浮动效果_material design表单

为什么 `:placeholder-shown` 是实现 Material Design 浮动标签的关键触发器

因为 :placeholder-shown 只在输入框有 placeholder 且内容为空时匹配，它天然对应“未输入”状态——这正是浮动标签需要上浮的初始条件。注意：它不响应聚焦（:focus），也不管用户是否删光了文字，只看 placeholder 是否“正在显示”。一旦用户输入任意字符（哪怕是一个空格），该伪类立即失效，标签可回落或保持上浮，取决于你如何组合其他状态。

必须给设置 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，否则会挡住输入框点击

常见失效场景和修复方式

实际写的时候，标签不动、闪动、或上浮位置错乱，大概率是这几个原因：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

HTML 结构不是 input 紧邻 label（必须用 + 或 ~ 选择器），例如中间插了 就断链了
placeholder 值为空字符串（placeholder=""）或只含空格，浏览器不认为 placeholder “正在显示”，:placeholder-shown 不触发


用了 required 但没设 placeholder，或 placeholder 被 JS 动态清空，导致状态丢失
transition 写在 label 上但没设初始 transform，动画无法插值——务必显式定义默认 transform: translateY(0)

和 JavaScript 方案比，纯 CSS 的边界在哪
纯 :placeholder-shown 方案简洁，但处理不了这些情况：

用户粘贴内容后又全选删除 → 输入框变空，但 placeholder 不一定重新显示（取决于浏览器行为），:placeholder-shown 可能不恢复
带格式粘贴（如从 Word 粘入不可见字符）→ input.value 看似为空，实际含 \u200b 或 \uFEFF，:placeholder-shown 不生效
需要支持「标签始终上浮」的只读字段或预填充字段 → 这些没有 placeholder，必须靠 class 控制

真要覆盖所有边缘 case，还是得监听 input 和 blur 事件，用 JS 显式切换 has-value 类。CSS 方案适合快速原型或对兼容性要求不高的内部工具。