appearance: none 是自定义表单控件的第一步，但需加 -webkit-appearance: none 兼容 safari，且必须设置 width/height，否则控件塌缩不可点；::before/::after 无法直接用于 checkbox/radio，须借助 label 和相邻选择器；accent-color 仅改高亮色，不改形状，兼容性有限；隐藏原生控件禁用 opacity: 0，推荐 clip 或 absolute 定位以保无障碍。
appearance: none 是解锁自定义的第一步，但不是万能钥匙
直接写 background 或 border 到 input[type="checkbox"] 上基本无效，因为浏览器对这些控件做了原子级渲染。必须先用 appearance: none 解锁样式控制权。
但注意：只写 appearance: none 不够——Safari 和旧版 Chrome 仍需 -webkit-appearance: none，否则样式被忽略；移除后控件会塌缩成不可见点，立刻补上 width 和 height（比如 18px），否则点击区域消失。
- 不加前缀 → Safari 中样式完全不生效
- 没设宽高 → 表单控件“还在”，但用户点不到
- 写了
appearance: none还是没变 → 检查是否被其他 CSS（如重置库）覆盖，加!important临时验证
为什么不能直接在 input 上用 ::before/::after
input[type="radio"] 和 input[type="checkbox"] 是替换元素，默认没有渲染盒，::before/::after 无处依附，浏览器静默忽略。
所以你看到的“伪元素没反应”，不是代码写错，是根本不可用。必须把视觉层移到 label 或兄弟元素上：
- 推荐结构：
<input type="radio" name="theme"><label>浅色</label>，然后用input:checked + label::before - 若 input 和 label 分离（如 Vue 动态插入），改用
input:checked ~ label::before，但中间不能插非 label 元素，否则断链 - 用
display: none隐藏 input 后，label 必须包裹或显式绑定（for属性），否则点击失效
accent-color 只改颜色，不改形状，兼容性有限
accent-color 是个轻量方案，只控制原生控件的高亮色（比如复选框打钩颜色、滑块小圆点），不影响大小、圆角、阴影或图标替换。
它可继承、支持 transition，但仅在 Chrome 93+、Firefox 92+、Safari 15.4+ 生效。老版本浏览器直接回退到默认灰。
- 适用场景：快速统一品牌色，又不想维护一整套伪元素逻辑时作降级
- 不适用场景：要圆角外框、对勾 SVG、中间态（indeterminate）、hover 动画等
- 写法示例：
input[type="checkbox"] { accent-color: #4f46e5; }
隐藏原生控件的三种方式，别用 opacity: 0
opacity: 0 看似简单，但会导致键盘焦点丢失、屏幕阅读器误读，且 Safari 下仍有微弱渲染残留。
更稳妥的隐藏方式是：
-
position: absolute; clip: rect(0, 0, 0, 0);—— 语义保留、可聚焦、无障碍友好 -
width: 0; height: 0; overflow: hidden;—— 简洁，但需确认父容器未裁剪 -
display: none;—— 最彻底，但必须确保 label 正确绑定（包裹或for），否则交互断裂
真正容易被忽略的是：无论哪种隐藏方式，都必须保证 input 仍能接收 :focus 和 :checked 状态，否则键盘空格切换、JS 检测值都会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
