:placeholder-shown仅在placeholder文本实际可见时生效，非仅存在placeholder属性；失效原因包括value非空、placeholder为空字符串、聚焦、type="number"初值为0等。
:placeholder-shown 只在 input 或 textarea 真正显示 placeholder 文本时才匹配，不是“有 placeholder 属性就生效”，而是“placeholder 正在可见”才触发。
为什么 input:placeholder-shown 没反应？
常见原因是 placeholder 实际没显示出来，导致伪类不激活。以下情况都会让 :placeholder-shown 失效：
-
input的value属性或 DOM.value非空（哪怕只含空格） -
placeholder属性值为空字符串：<input placeholder=""> - 用户已聚焦输入框且光标在内（部分浏览器会提前隐藏 placeholder）
- 用了
type="number"且初始值为0或"0"—— 此时 placeholder 不显示，:placeholder-shown不匹配
:placeholder-shown 和 ::placeholder 到底谁管什么？
这是最容易混淆的点：:placeholder-shown 选中的是整个 input 元素本身，而 ::placeholder 才控制占位符文本的样式。
- 想改边框、背景、字体粗细、是否斜体？用
input:placeholder-shown - 想改占位符文字颜色、透明度、大小？必须用
input::placeholder - 写成
input:placeholder-shown { color: red; }对 placeholder 文字无效 —— 因为color继承自父元素，但 placeholder 文本实际受::placeholder控制 - 两者可组合：比如
input:placeholder-shown::placeholder { opacity: 0.6; }
实现浮动标签（Material Design 风格）的关键写法
核心逻辑是：placeholder 显示时，label 隐藏或压入输入框；placeholder 隐藏（即用户输入或聚焦）时，label 浮起。HTML 结构必须满足 label 在 input 后面（用于 + 或 ~ 选择器）：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
input {
padding: 12px 8px;
}
input:placeholder-shown + label {
opacity: 0;
transform: translateY(1em);
}
input:not(:placeholder-shown) + label,
input:focus + label {
position: absolute;
top: -0.8em;
left: 8px;
font-size: 0.8em;
background: white;
padding: 0 4px;
opacity: 1;
transform: none;
}
注意：input:not(:placeholder-shown) 并不等价于 input:focus —— 用户粘贴内容、失焦后仍有值，仍应保持 label 浮起，所以建议同时监听 :not(:placeholder-shown) 和 :focus。
兼容性兜底必须手动判断 value 状态
IE 完全不支持 :placeholder-shown，Safari 14.1 之前对 textarea 支持不稳定。纯 CSS 方案失效时，得靠 JS 补位：
- 监听
input和blur事件 - 用
el.value.trim() === ''判断是否“空”，而非依赖 placeholder 是否显示 - 动态添加
placeholder-visible类，CSS 中用.placeholder-visible替代:placeholder-shown - 避免只监听
focus/blur—— 粘贴、拖入、自动填充等场景下value变化不会触发这些事件
真正难的不是写出浮动动画，而是处理所有 value 变更路径并保持 class 同步 —— 这部分逻辑一旦漏掉，视觉状态就会和真实数据脱节。
