Safari 不支持 option:checked 伪类，这是 WebKit 主动限制而非 bug；:focus 触发严格，:valid/:invalid 更新滞后，需 JS 辅助；替代方案为 select:focus 或自定义组件。
Safari 对表单状态选择器的支持存在明确断层： :focus 可用但易被覆盖，:checked 和 :disabled 行为基本符合标准，而 :valid/:invalid 在部分版本中静默失效；最关键的是 option:checked 根本不支持——这不是 bug，是 WebKit 的主动限制。
为什么 option:checked 在 Safari 中完全没反应
这不是兼容性问题，而是标准行为。Safari（及所有 WebKit 浏览器）不暴露 <option> 的“已选中”视觉状态给 CSS，select.value 才是唯一可靠来源。你写的 option:checked { background: #007aff; } 在开发者工具里能看到样式已加载，但实际渲染永远不生效。
- 别尝试用
option[aria-selected="true"]伪装——Safari 不自动设该属性 - 不要依赖 JS 动态加 class 到
option上再写option.selected——<option>是替换元素，class 不参与样式计算 - 真实可用的替代方案只有两种：
select:focus高亮整个下拉框，或用自定义 select 组件接管渲染
:focus 样式在 Safari 中突然失效的常见原因
Safari 的 :focus 触发逻辑比其他浏览器更严格，尤其在表单字段嵌套、动态插入或使用 Shadow DOM 时容易丢失样式响应。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 确保没有全局重置
outline: none后忘记补box-shadow或border—— Safari 对无 outline 的 focus 状态渲染极弱 - 如果用了
input:focus-visible，必须同时保留input:focus回退规则，Safari ≤16.4 不支持:focus-visible - React/Vue 中动态创建的 input，首次 focus 可能因渲染时机问题导致样式未挂载，可加
setTimeout(() => el.focus(), 0)强制延迟触发 - 在 iOS 上，
input[type="number"]聚焦时可能跳过:focus（因系统键盘接管），建议统一用type="text"+ 输入限制
:valid 和 :invalid 在 Safari 中为何有时不更新
这些伪类依赖浏览器内置验证逻辑，而 Safari 对 required、pattern、min/max 的触发时机和重验条件更保守——它不会像 Chrome 那样在每次输入后立即重算，常等到 blur 或 submit 时才更新状态。
立即学习“前端免费学习笔记（深入）”；
- 别只靠
input:invalid { border-color: red; }做实时反馈；必须配合 JS 监听input事件手动 toggle class -
form.checkValidity()在 Safari 中返回值可靠，但input.validity.valid在某些异步场景下可能滞后，建议用input.reportValidity()主动触发校验 - 若用了
novalidate属性，:valid/:invalid将彻底失效，且无法通过 JS 恢复——这是标准行为，不是 Safari 特有 - 注意
type="email"在 Safari 中对本地域（如user@localhost）判定为 invalid，而 Chrome 认为合法
最易被忽略的一点：Safari 的表单状态伪类不继承，也不作用于伪元素。比如 input::placeholder:invalid 永远无效，textarea:focus::before 也不会触发。任何想绕过这个限制的 hack（如用 JS 注入 span 替代 placeholder）都会破坏可访问性。老老实实按标准路径走，比强行“修复”更省时间。
