:placeholder-shown 是仅在 placeholder 文本肉眼可见时生效的状态伪类，用于精准区分空未聚焦、空已聚焦、有内容三种状态，需确保元素有非空 placeholder 属性、value 严格为 ""、避免 number/date 类型，并注意浏览器兼容性。
:placeholder-shown 是一个状态型伪类，它只在输入框**真正显示 placeholder 文本时**才生效——不是“写了 placeholder 属性就触发”，而是“placeholder 正在肉眼可见地显示着”才匹配。利用它，可以精准区分「空且未聚焦」「空且已聚焦」「有内容」三种状态，从而美化未输入内容时的表单控件外观。
确保 :placeholder-shown 能正常触发
这是所有效果的前提，常见失效原因必须避开：
- input 或 textarea 标签必须带 非空的 placeholder 属性，哪怕只是
placeholder=" "（一个空格） - DOM 中的
value必须严格为""（空字符串），含空格、换行符、零宽字符都会导致 placeholder 隐藏，伪类不激活 - 避免使用
type="number"或type="date"等类型：清空后值虽为""，但多数浏览器不渲染 placeholder，:placeholder-shown 永远不匹配；建议统一用type="text"+ JS 校验 - 旧版 Safari 和 IE 完全不支持，如需兼容可加 JS fallback
仅对「空且 placeholder 可见」状态应用样式
这个状态对应用户刚打开页面、尚未点击或输入的初始态。你可以安全地在此时调整边框、背景、字体、阴影等整体样式，而不会干扰已有内容的视觉表现：
- 给空输入框加浅灰边框和柔和阴影：
input:placeholder-shown { border-color: #e0e0e0; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); } - 降低字体粗细或设为斜体，暗示“此处待填写”：
input:placeholder-shown { font-weight: 400; font-style: italic; } - 配合
::placeholder统一视觉：比如让占位文字更淡，同时输入框整体更轻盈
与 :focus、:valid 组合实现浮动标签（无 JS）
单独用 :placeholder-shown 只能响应“空”的瞬间，但真实场景需要保持「有值即上浮」。纯 CSS 解法依赖组合：
- label 必须写在 input 后面，用
+相邻选择器控制 - input 必须带
required属性，才能使:valid在有值时为 true - 关键规则示例：
input:placeholder-shown + label { opacity: 1; transform: translateY(0); }<br> input:focus + label,<br> input:valid + label { opacity: 0.85; transform: translateY(-0.75rem); } - 别忘了给 input 预留顶部 padding，防止文字被上浮的 label 遮挡
隐藏原生 placeholder，避免视觉冲突
浮动标签本身已承担提示功能，原生 placeholder 文字反而多余。可用 ::placeholder 彻底隐藏它，同时保留 :placeholder-shown 的状态信号作用：
-
input::placeholder { color: transparent; }（推荐，保留占位空间） - 或
input::placeholder { opacity: 0; } - 注意：
:placeholder-shown控制的是 input 元素自身，::placeholder控制的是内部文字——两者职责分明，不可混用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
