:placeholder-shown 是当 input 或 textarea 有 placeholder 属性且当前显示占位符文本时匹配的伪类，用于空值样式控制，需注意浏览器兼容性及 value 属性影响。
:placeholder-shown 是一个 CSS 伪类，当 或 元素**当前显示 placeholder 文本**（即用户尚未输入任何内容，且该字段未获得焦点或虽获焦点但仍为空）时，该伪类匹配成功。它常被用来在输入框为空时动态改变样式，比如隐藏清空按钮、调整边框颜色、显示提示文字等。
前提条件：必须有 placeholder 属性
该伪类只对设置了 placeholder 属性的表单控件生效。如果没有 placeholder，即使输入框为空，:placeholder-shown 也不会匹配。
- ✅ 有效：
- ❌ 无效：
（无 placeholder） - ⚠️ 注意：
placeholder=""（空字符串）在部分浏览器中可能不触发该伪类，建议避免
常见用法：控制相关元素显隐或样式
利用它可实现“仅在为空时才显示某提示”或“有内容时才启用某功能”的 UI 逻辑，无需 JS 监听事件。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 隐藏「清空」按钮（如 × 图标），仅在有值时显示：
input:not(:placeholder-shown) + .clear-btn { display: inline; }input:placeholder-shown + .clear-btn { display: none; } - 输入框获得焦点但依然为空时，保持 placeholder 显示，此时
:placeholder-shown仍为 true；一旦输入任意字符（包括空格），该伪类立即失效。 - 配合
:focus实现更精细状态：input:focus:placeholder-shown { border-color: #007bff; }（聚焦且为空时高亮边框）
注意兼容性与边界情况
主流现代浏览器（Chrome 47+、Firefox 51+、Safari 9.1+、Edge 79+）均支持，但 IE 完全不支持，需做降级处理。
- 移动端 Safari 对
textarea的:placeholder-shown支持较晚（iOS 12.2+），旧版本可能不生效 - 输入空格后 placeholder 消失 →
:placeholder-shown不再匹配（即认为空已“被填”） - 设置
value属性（如通过 JS 或服务端渲染）会使 placeholder 不显示，伪类也不匹配 —— 即使 value 是空字符串value=""，只要 DOM 中存在该属性，部分浏览器也可能跳过 placeholder 显示逻辑
替代方案（需要 JS 时）
若需更精确判断“是否真正为空”（比如过滤空格、支持无 placeholder 场景），应结合 JS：
- 监听
input事件，检查el.value.trim() === '' - 使用
el.checkValidity()配合required属性判断必填项是否为空 - 用
el.reportValidity()触发原生校验提示
