:placeholder-shown伪类仅在input/textarea的value为空字符串（''）且含placeholder属性时生效，空格等空白字符会导致其不匹配；需用trim()清理并同步value及触发事件，兼容性需JS降级。
输入框填完后 placeholder 还显示，通常是因为 value 为空字符串但输入框实际有内容（比如只含空格），或用了非标准方式清空/赋值导致 DOM 状态未同步。CSS 中的 :placeholder-shown 伪类只在 placeholder **真正可见时**才生效——它依赖浏览器对 input 是否“被视为为空”的判断，而这个判断基于 value 属性是否为**空字符串（''）**，且不包含纯空白字符（如空格、换行等会被 trim 后影响判断）。
确保 value 真正为空才能触发 :placeholder-shown
用户输入空格再删除，input.value 可能变成 ' '（一个空格），此时 placeholder 不会显示，:placeholder-shown 也不匹配。解决方法是监听输入并自动清理首尾空白：
- 用
input事件监听，实时调用.trim()并同步回value - 或者在表单提交/失焦时统一处理，但实时 trim 更可靠
- 注意：仅设置
input.value = input.value.trim()不够，需同时触发input事件让框架（如 Vue/React）感知变化
:placeholder-shown 的适用范围与限制
该伪类只对 <input> 和 <textarea></textarea> 生效，且要求元素当前确实渲染了 placeholder（即有 placeholder 属性，且未被禁用）。常见失效场景：
- placeholder 被 CSS 隐藏（如
::placeholder { opacity: 0; }），但元素仍算“shown”，伪类仍匹配 - input 设置了
required但未填，placeholder 显示 →:placeholder-shown匹配 - input 有值（哪怕是一个空格）→ placeholder 隐藏 → 伪类不匹配
-
type="number"在部分浏览器中输入非数字时value为空字符串，placeholder 可能意外显示
用 :placeholder-shown 实现「有无内容」的样式切换
这是它的核心用途：替代 JS 监听来控制 label 浮动、边框变色等。关键写法示例：
立即学习“前端免费学习笔记（深入）”；
input {
padding: 12px;
border: 2px solid #ccc;
}
input:focus {
outline: none;
border-color: #007bff;
}
input:not(:placeholder-shown) {
border-color: #28a745;
}
input:not(:placeholder-shown) + label {
transform: translateY(-20px) scale(0.85);
color: #28a745;
}
注意：:not(:placeholder-shown) 表示「placeholder 没在显示」，即输入框**非空**（严格说：value !== ''），此时可安全应用「已填写」样式。
兼容性与降级建议
:placeholder-shown 在 Chrome 47+、Firefox 47+、Safari 9.1+、Edge 79+ 支持良好。IE 完全不支持，需 JS 降级：
- 监听
input和blur事件，手动增删自定义 class（如has-value） - CSS 中同时写两套规则：
input:not(:placeholder-shown), input.has-value { ... } - 避免只依赖伪类做关键交互（如必填校验），始终以 JS 判断
input.value.trim() !== ''为准
基本上就这些。核心就一条：placeholder 显示与否，由 value 是否为空字符串决定；而 :placeholder-shown 是它的 CSS 镜像，用得好能少写不少 JS。
