:placeholder-shown 仅表示 placeholder 正在显示，即元素有 placeholder 属性且 input.value.trim() === ""，不能用于判断内容长度或有效输入；需用 javascript 实时监听 input 事件并基于 value.trim().length 动态加类控制样式。
不能直接用 :placeholder-shown 判断“内容长度”，它只反映 placeholder 是否正在显示——即 input.value.trim() === "" 且存在 placeholder 属性。想靠纯 CSS 做“长度 ≥ 3 字变色”或“非空但少于 5 字加警告边框”，这条路走不通。
为什么 :placeholder-shown 不等于“内容为空”
它只在两个条件同时满足时才匹配：
– 元素有 placeholder 属性（哪怕值是空字符串 placeholder=""）
– 当前 input.value 经过 trim() 后为 ""
一旦用户输入一个空格、零宽字符、换行符，或粘贴了不可见字符，:placeholder-shown 立刻失效——但此时内容长度根本不是 0，也不代表“已有效输入”。
常见误判场景：
- 用户粘贴
" "（全角空格）→value.length === 1，但trim()后为空 →:placeholder-shown仍匹配 - 用户输入
"a "（带尾随空格）→trim()后为"a"→:placeholder-shown不匹配，但长度仅 1 -
<input placeholder="姓名" value=" ">→ DOM 中 value 是空格，占位符不显示，伪类不触发，但内容长度是 1
:placeholder-shown 的真实适用边界
它适合做两类事情：
– 视觉反馈：占位符可见时统一降级样式（如浅灰边框、低对比文字）
– 浮动标签切换：配合 :focus-within 或 JS 判断是否“空 + 聚焦”，再决定 label 是否上浮
典型可靠写法：
input:placeholder-shown {
border-color: #ddd;
opacity: 0.7;
}
input:not(:placeholder-shown) {
border-color: #28a745;
}
label.input-group:focus-within input:placeholder-shown {
border-color: #007bff;
}
注意：
– 不要用 input:not(:placeholder-shown) 当“已填写”信号，它可能被空格、BOM、自动填充干扰
– 不要和 :valid 混用，:valid 只响应 required / pattern 等约束，和占位符状态无关
– Safari ≤15.4 存在偶发重绘延迟，输入后样式没立刻更新，需加 will-change: opacity 或改用 class 控制
真要按长度控制样式？必须用 JS
CSS 没有“字符串长度”计算能力，:placeholder-shown 更不是钩子。唯一可落地的方式是监听 input 事件，实时计算 el.value.trim().length，然后动态加 class：
const input = document.querySelector('input[data-length-validate]');
input.addEventListener('input', () => {
const len = input.value.trim().length;
input.classList.toggle('too-short', len > 0 && len = 3);
input.classList.toggle('too-long', len > 20);
});
对应 CSS：
.too-short { border-color: #ffc107; }
.ok-length { border-color: #28a745; }
.too-long { border-color: #dc3545; }
关键点：
– 一定要用 trim()，否则首尾空格干扰判断
– 不要在 change 事件里做，它不响应实时输入
– 如果涉及表单提交校验，服务端必须重新计算长度，前端 class 只是提示
最常被忽略的一点：placeholder 显示状态和用户意图完全脱钩。一个输入框可能 placeholder 消失了，但用户只是随手敲了个空格；也可能 placeholder 还在，但用户已经用密码管理器填好了值——:placeholder-shown 对这些一无所知。别把它当数据状态用，它只是个视觉开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
