:placeholder-shown 仅在 input 有 placeholder 属性且 value 严格为空字符串时生效；常见失效原因包括缺失 placeholder、值含空格或换行符、type="number" 兼容性差、伪类顺序错误及旧浏览器不支持。
为什么 :placeholder-shown 有时不生效
这个伪类只在输入框有 placeholder 属性且当前值为空（input.value === ""）时触发。如果忘了写 placeholder，或者用户输入了空格再删掉（此时值是 " "），它都不会匹配。
常见错误现象：:placeholder-shown 完全没反应，控制台也没报错——大概率是 placeholder 属性缺失，或输入框被 JavaScript 清空后残留空格/换行符。
- 确保 HTML 中存在
placeholder属性：<input placeholder="请输入"> - 避免用 JS 设置空字符串时带空格：
input.value = " ".trim()比直接赋" "更安全 - 注意：Firefox 对
type="number"的支持不稳定，建议改用type="text"或加降级样式
:placeholder-shown 和 :focus 组合使用场景
很多 UI 要求“空状态 + 聚焦”时才显示边框高亮或提示文字颜色变化，这时需要叠加伪类。单独用 :placeholder-shown 无法区分是否正在编辑。
例如让空输入框聚焦时边框变蓝，失去焦点后恢复灰色：
input:placeholder-shown:focus {
border-color: #007bff;
}
input:placeholder-shown:not(:focus) {
border-color: #ddd;
}
- 不能写成
input:focus:placeholder-shown—— 顺序错误，部分浏览器不识别 -
:not(:focus)必须显式写出，否则默认样式可能覆盖预期效果 - 移动端 Safari 在软键盘收起后有时不重绘，可加
transform: translateZ(0)强制触发重排
兼容性与 fallback 方案
IE 完全不支持 :placeholder-shown，Edge 12–18 支持但存在闪烁问题；iOS Safari 12.2+ 才稳定支持。生产环境必须考虑降级。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
推荐用 JavaScript 补充判断逻辑，而不是纯 CSS：
const input = document.querySelector('input');
const updatePlaceholderState = () => {
input.classList.toggle('is-empty', input.value.trim() === '');
};
input.addEventListener('input', updatePlaceholderState);
input.addEventListener('blur', updatePlaceholderState);
updatePlaceholderState();
对应 CSS：
input.is-empty { /* 空状态样式 */ }
input.is-empty:focus { /* 空 + 聚焦样式 */ }
- CSS-only 方案在旧版 iOS 上会失效，且无法处理粘贴含空格内容后的状态
- JS 方案虽然多几行，但状态可控、可测、可 debug
- 不要用
input[value=""]，这个属性选择器只匹配初始 value=""，不响应动态变化
和 ::placeholder 别混用
:placeholder-shown 是作用于 input 元素本身的伪类，而 ::placeholder 是作用于占位文字的伪元素——两者目标完全不同。
典型误用：input:placeholder-shown::placeholder { color: red; } 是合法语法，但毫无意义：占位文字本身只在 :placeholder-shown 为真时才存在，加双重限定反而增加解析负担。
- 改样式优先用
::placeholder（如调整字体大小、透明度） - 改容器行为优先用
:placeholder-shown（如切换 border、background、display） - Chrome 120+ 开始对嵌套伪类解析更严格，过度组合可能导致样式被忽略
实际项目里最常被忽略的是空格处理和移动端重绘时机——光靠 CSS 无法覆盖所有输入路径，尤其涉及剪贴板操作或第三方输入法时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
