在 Safari 中用 appearance: none 移除 checkbox 默认样式可行，但必须搭配 ::before 或 ::after 伪元素重绘且显式设置 display: block（或 inline-block），否则伪元素不渲染——这是 Safari 独有的坑。
直接说结论：在 Safari 中用 appearance: none 移除 checkbox 默认样式是可行的，但必须搭配 ::before 或 ::after 伪元素重绘，且需显式设置 display: block（或 inline-block），否则伪元素不渲染——这是 Safari 独有的坑。
为什么 Safari 下 appearance: none 后 checkbox 消失了？
Safari 对表单控件的渲染机制更严格：当 appearance: none 生效后，原生控件被“剥离”，但若未给元素指定尺寸、显示类型或伪元素内容，它就真成透明空盒了。Chrome/Firefox 有时会 fallback 渲染一个不可见但占位的框，Safari 不会。
常见错误现象：input[type="checkbox"] { appearance: none; } 写完后，复选框在 Safari 里点不动、看不见、也不响应 :checked。
- 必须加
display: inline-block（不能只靠父容器撑开） - 必须用
::before绘制视觉层（content: ""不可省） - 别依赖
width/height继承，要显式设置（如width: 18px; height: 18px;）
如何用伪元素重绘 checkbox 的勾选状态？
核心是利用 :checked + ::before 控制背景或边框，再用 ::after（可选）画对勾。Safari 支持 transform 和 background，但不支持 clip-path 在伪元素上做复杂裁剪（旧版尤其敏感）。
实操建议：
- 用
border+background模拟边框和填充，比纯box-shadow更稳 - 对勾推荐 SVG base64 或
mask-image（iOS 15.4+ 支持良好），避免用字符 ✅（字体兼容性差） - 动画只用
background-color或transform: scale()，Safari 对opacity动画 checkbox 伪元素支持不稳定
示例最小可用代码：
input[type="checkbox"] {
appearance: none;
display: inline-block;
width: 18px;
height: 18px;
margin: 0;
vertical-align: -2px;
position: relative;
}
input[type="checkbox"]::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #999;
border-radius: 4px;
}
input[type="checkbox"]:checked::before {
background: #007aff;
border-color: #007aff;
}
input[type="checkbox"]:checked::after {
content: "";
position: absolute;
top: 3px;
left: 6px;
width: 6px;
height: 10px;
border: 2px solid white;
border-top: 0;
border-right: 0;
transform: rotate(-45deg);
}
遇到 iOS Safari 15 以下版本不生效怎么办？
iOS 14.5–15.2 存在 appearance: none 被忽略或伪元素错位的问题，本质是 WebKit 渲染管线 bug。绕过方式不是降级，而是加前缀 + 强制重绘：
- 补全
-webkit-appearance: none（虽然现代 Safari 已不强制需要，但老版本认这个） - 给父容器加
transform: translateZ(0)或will-change: transform触发硬件加速，修复伪元素定位偏移 - 避免在
label上设pointer-events: none，Safari 下可能阻断 checkbox 的 click 事件冒泡
特别注意：iOS Safari 对 label > input 的点击热区识别很弱，务必确保 input 是 label 的直接子元素，且没被 z-index 或 overflow: hidden 截断。
最易被忽略的一点：Safari 会缓存表单控件的“原生渲染快照”，改完 CSS 后如果没触发重绘（比如没改 display 或没加伪元素），它可能沿用旧的 invisible rendering path。所以每次调试，先删掉所有样式，再一行行加回来，观察哪一行让 checkbox 突然“复活”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
