safari（15.4前）不支持标准 appearance: none，必须同时写 -webkit-appearance: none 和 appearance: none；input 是替换元素，伪元素无效，需用 label + 状态选择器实现自定义样式；隐藏原生控件应使用 position: absolute + clip 或 clip-path，禁用 display: none/visibility: hidden；须显式定义 :focus/:disabled 样式以保障可访问性。

为什么 appearance: none 在 Safari 中不生效

不是你漏写了 appearance: none，而是 Safari（尤其 15.4 之前）根本不认这个标准属性。它只响应 -webkit-appearance: none，且必须显式声明——仅靠 Autoprefixer 或现代 CSS 写法无法覆盖。

常见错误现象：input[type="checkbox"] { appearance: none; } 在 Safari 中完全无效，原生方框照常显示。

• 必须同时写 -webkit-appearance: none 和 appearance: none，顺序无关，但缺一不可
• 移除后控件尺寸塌缩为 0×0，立刻补 width: 18px; height: 18px;，否则点击区域消失
• 若用了 Bootstrap、Normalize 或其他重置库，检查是否被 all: unset 或 appearance: auto 覆盖；临时加 !important 验证是否生效

::before 和 ::after 在 input 上根本不会渲染

你写的伪元素没出现，不是选择器写错，是浏览器直接忽略——input[type="checkbox"] 是替换元素，没有渲染盒，::before/::after 无处附着。

正确做法是把视觉层移到 label 或兄弟元素上，用状态选择器联动：

• 结构推荐：<input type="checkbox" id="agree"><label for="agree">我同意</label>
• 选中样式绑定：input:checked + label::before（相邻兄弟）或 input:checked ~ label::before（通用兄弟，中间不能插非 label 元素）
• 若用 Vue/React 动态插入导致 DOM 顺序不可控，优先选 ~，但需确保中间无干扰节点

隐藏原生控件时用 opacity: 0 会触发 Safari 点击穿透

Safari 对 opacity: 0 的 input 处理异常：视觉隐藏了，但底层仍响应点击，导致用户点在 label 文字上却没反应，或点在空白处意外触发。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

真正稳妥的隐藏方式是脱离文档流 + 彻底裁剪：

• 用 position: absolute; clip: rect(0, 0, 0, 0);（兼容性最好）
• 或 clip-path: inset(100%);（现代写法，Safari 15.4+ 支持）
• 绝对禁止用 display: none 或 visibility: hidden：它们让控件退出可访问性树，键盘 Tab 跳过、屏幕阅读器读不到、表单提交丢失值

禁用状态和焦点样式在 Safari 中容易被忽略

很多人只处理 :checked，结果 Safari 用户用键盘操作时完全看不到焦点位置，WCAG 2.1 AA 直接不达标。

必须显式定义：

• input:focus + label::before { outline: 2px solid #007bff; outline-offset: 2px; }
• input:disabled + label::before { opacity: 0.5; cursor: not-allowed; }
• 如果用 SVG 替代伪元素，确保 svg 加 aria-hidden="true"，而文字 label 保留语义

最易被忽略的是：Safari 对 outline 的默认渲染偏弱，建议用 outline-offset 显式拉开距离，避免被外边框遮挡。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！