Safari ≤15.3 中 :placeholder-shown 伪类不准确是因 WebKit 未严格遵循规范，表现为输入删空后不恢复、聚焦后仍保留、粘贴不可见字符后失效；需 JS 监听事件并手动切换类来修复。
为什么Safari中:placeholder-shown匹配状态和实际不符
它不是“判断错误”，而是 Safari ≤15.3 的 WebKit 实现未严格遵循规范：伪类可能在输入后不退出、聚焦后仍保留、甚至完全不触发。这不是你 CSS 写错了，是浏览器内核没跑对逻辑。
常见现象包括：
-
:placeholder-shown初始渲染正确，但用户输入再删空后，伪类不恢复 - 点击 input 后 placeholder 消失，但
:placeholder-shown仍为 true - 粘贴含全角空格或零宽字符（
\u200b）的内容，value非空但语义为空，伪类却已失效
Safari里:placeholder-shown失效的硬性前提
三个条件缺一不可，而 Safari 经常只满足其中一两个：
- 元素必须有
placeholder属性（哪怕只是placeholder=""） -
input.value.trim() === ""—— 注意，trim()是关键，value === ""在 Safari 中会漏掉空格、换行、不可见字符 - 浏览器版本 ≥ Safari 15.4（iOS 16.4+ / macOS Ventura+），旧版 WebKit 不保证重绘
尤其注意：type="number" 输入框清空后值虽为 ""，但 Safari 常不渲染 placeholder，导致伪类根本无从匹配。
别信 autoprefixer，也别靠提高选择器权重
:placeholder-shown 是原生伪类，没有 -webkit-placeholder-shown 这种前缀变体。Autoprefixer 对它加任何前缀都无效，反而可能引入冗余声明干扰解析。
提高权重（比如加 !important 或多层嵌套）解决不了问题——因为伪类本身就没被计算，CSS 引擎压根没生成匹配结果。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
真正有效的做法只有：
- 用 JS 监听
input、focus、blur事件 - 每次触发时执行
input.value.trim() === "" - 手动切换
placeholder-shown类（如input.classList.toggle('is-empty', isEmpty)） - 初始加载后立刻调用一次判断，防止 SSR 渲染与客户端状态不一致
移动端 Safari 软键盘收起后样式不更新
这是 2026 年仍存在的真实问题：iOS Safari 在软键盘收起瞬间，不会主动触发重排，:placeholder-shown 状态卡住，导致清除按钮不显示、边框颜色不变、浮动 label 不回落。
不能依赖 resize 或 scroll 事件来 hack，最稳的解法是监听 blur 后加 setTimeout(() => updateState(), 0)，给浏览器一个微任务周期去同步 DOM 状态。
更隐蔽的坑是：如果 input 失焦时恰好处于 composition 状态（比如中文输入法正在选词），value 可能还没更新，这时 trim() 仍返回旧值。必须搭配 compositionend 事件兜底，但要注意 Safari 14–15.3 对该事件支持不稳定，建议只在 blur 后延迟检测 + 强制同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
