:placeholder-shown 在 Safari ≤15.3 中不可靠，因其 WebKit 实现不完整；必须用 JS 监听 input/focus/blur 并基于 value.trim()==="" 判断语义空状态来同步 class。
:placeholder-shown 在不同浏览器中无法“统一表现”，它本身不是样式规则，而是状态判断条件；所谓“表现不一致”，本质是各浏览器对“何时算 placeholder 显示”判定逻辑不同。你不能靠加前缀或调权重让它在 Safari 15.3 下突然生效，必须分层应对。
为什么 :placeholder-shown 在 Safari ≤15.3 中完全不可信
WebKit 内核（Safari 15.3 及更早）对 :placeholder-shown 的实现是半成品：输入后不及时退出、聚焦后仍匹配、甚至首次渲染就跳过。这不是 CSS 写法问题，Autoprefixer 对它加前缀无效——它没有厂商前缀变体，原生就叫 :placeholder-shown。你写再多 !important 或提高选择器权重都没用。
常见错误现象包括：
- 用户输完又删光，标签却没回落
- 光标点进输入框（未输入），
:placeholder-shown仍为 false - 本地 Chrome 正常，CI 构建后 iOS 真机测试直接失效
必须用 JS 补位的三个关键时机
纯 CSS 方案在旧版 Safari 中必然断裂，可靠做法是监听真实 DOM 状态并手动切换 class。核心不是“有没有 placeholder 属性”，而是“当前是否语义为空”：
立即学习“前端免费学习笔记（深入）”；
- 监听
input事件：捕获所有输入（含粘贴、拖拽、IME 上屏） - 监听
focus和blur：处理聚焦/失焦时的边界状态（如用户只聚焦不输） - 初始加载后立即执行一次
updateState()：防止 SSR 渲染后 DOM 值与 JS 状态不同步
判断逻辑必须用 input.value.trim() === ""，不能用 !input.value 或 input.value === ""——全角空格、零宽字符（\u200b）、换行符都会让 value 非空但语义为空。
现代浏览器中仍需注意的兼容陷阱
即使在 Chrome/Firefox/Safari 16+ 中，:placeholder-shown 也非万能，以下情况会静默失效：
-
input元素缺失placeholder属性（哪怕只是placeholder=" "也要写） -
type="number"或type="date"：清空后值虽为""，但浏览器常不渲染占位符，伪类不触发 - 伪类顺序写错：
input:focus:placeholder-shown在部分浏览器不识别，应写成input:placeholder-shown:focus - 与
:has()混用：div:has(input:placeholder-shown)在 Safari 15.4+ 才支持，旧版必须 JS fallback
想控制父容器或兄弟元素？别依赖 :has() 做兜底——它目前仍非 Web 标准必选项，生产环境必须用 JS 同步 class 到外层容器。
清除按钮和浮动标签不能只靠 :placeholder-shown
:placeholder-shown 本身不控制清除按钮显隐，因为 ::-webkit-search-cancel-button 是渲染层私有伪元素，不在标准 DOM 树中。移动端 Safari 对它的支持极差，部分版本完全不渲染。真正健壮的做法是：
- 先禁用原生按钮：
input[type="search"] { appearance: none; }+input[type="search"]::-webkit-search-cancel-button { display: none; } - 用绝对定位的
<button></button>或::after模拟按钮 - 用 JS 监听
input事件，根据value.trim() !== ""控制其opacity或visibility
浮动标签同理：:placeholder-shown 只管“空且占位符显示”，不管“有值但失焦”。要维持上浮状态，必须组合 :valid（需 required）或 JS 的 has-value class。没有 required 就没有 :valid，纯 CSS 就无解。
最易被忽略的点是：所有基于 :placeholder-shown 的交互，最终都依赖于用户是否真的“语义为空”。这个判断无法由 CSS 完成，必须靠 JS 的 trim() 和多事件监听兜底——不是为了炫技，而是因为浏览器内核至今没达成一致。
