HTML中使用CSS的:placeholder-shown在输入框为空时应用样式-html教程-PHP中文网

:placeholder-shown仅在元素有placeholder属性、input.value严格为空字符串且浏览器支持时生效；常见失效原因包括缺失placeholder、值含空格或换行符、type="number"兼容性差、旧版safari/ie不支持及伪类顺序错误。

html中使用css的:placeholder-shown在输入框为空时应用样式

它只在三个条件同时满足时才触发：元素有placeholder属性、input.value严格等于空字符串""、浏览器支持该伪类。缺一不可。

最常见错误是HTML里漏写placeholder属性——哪怕只是placeholder=" "（一个空格）也比没写强
input.value = " "（带空格）或input.value = "\n"会导致占位符不显示，:placeholder-shown自然不匹配
type="number"或type="date"清空后值虽为""，但占位符常不渲染，伪类失效；建议改用type="text"再用JS校验类型
Safari ≤15.3、IE 完全不支持；Edge 12–18 支持但有闪烁；生产环境必须降级

<input>是替换元素，不支持伪元素，所以input:placeholder-shown::after永远不生效。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

想加提示文字？得靠结构配合：<input placeholder="..."><small class="hint"></small>，再写input:placeholder-shown + .hint { display: block; }
想控制父容器样式？用:has()（Chrome 105+、Safari 15.4+）：div:has(input:placeholder-shown) { background: #fef9c3; }，但IE/旧版Edge不支持，需JS fallback
按钮禁用态常用~（通用兄弟）：input:placeholder-shown ~ button[type="submit"] { opacity: 0.4; pointer-events: none; }

input:placeholder-shown:focus合法且常用，表示“已聚焦但尚未输入”；但input:focus:placeholder-shown在部分浏览器不识别——伪类顺序影响兼容性。

要实现“空且聚焦时边框变蓝，空但失焦时灰边框”，必须显式写出:not(:focus)：input:placeholder-shown:focus { border-color: #3b82f6; } input:placeholder-shown:not(:focus) { border-color: #d1d5db; }
:placeholder-shown和:valid互斥——只要输入了内容，哪怕格式错误（如邮箱少@），伪类也会立刻移除；它只管“空”，不管“对不对”
浮动标签这类需要“聚焦 + 空值”双条件的场景，纯CSS做不到，必须用JS监听input和blur事件更新is-empty类

别指望纯CSS覆盖所有情况。2026年主流浏览器虽已支持，但移动端Safari软键盘收起后可能不重绘，旧系统仍大量存在。

基础样式用:placeholder-shown，降级样式用.is-empty类，由JS维护：el.classList.toggle('is-empty', !el.value.trim())
React/Vue中确保受控组件的value prop 是""而非null或undefined，否则DOM属性不同步，伪类不响应
避免placeholder=""（空字符串），行为不一致；统一用placeholder=" "或有意义的提示文本
检查是否被其他CSS规则覆盖：浏览器开发者工具里看:placeholder-shown是否出现在“Computed”面板的匹配规则中