appearance: none 需配合前缀和兜底样式才能生效，须显式设置宽高、vertical-align，并通过 label 结构与 :checked 选择器联动自定义样式，同时兼顾可访问性。
appearance: none 能隐藏原生单选框，但直接写它不会自动给你一个漂亮的新样式——你得自己画、自己定位、自己同步状态，否则要么看不见，要么点不中，要么选不上。
为什么写了 appearance: none 却没效果
这不是你 CSS 写错了，而是浏览器前缀没补全或后续样式没跟上：
- 只写
appearance: none，Safari 会忽略，必须加-webkit-appearance: none - Firefox 84 及以下版本即使加了
-moz-appearance: none也清不干净，得配合position: absolute; clip: rect(0 0 0 0)或opacity: 0做兜底 - 移除原生样式后，
input[type="radio"]默认宽高为 0，必须显式设置width和height（比如18px），否则点击区域消失 - 没加
vertical-align: middle，单选框会和文字基线错位，看起来“飘”在半空
input:checked 怎么和自定义图标联动
不能靠 JS 绑定，也不能直接给 input 加 ::before —— 浏览器不允许伪元素作用于 input[type="radio"]。正确做法是借助 DOM 结构和选择器：
- 把
input放进label里，或者用for属性绑定，确保点击 label 就能触发选中 - 用相邻兄弟选择器：比如
input[type="radio"]:checked + label::before，在 label 前面画个圆点 - 或者用
input[type="radio"]:checked::after（需先设position: relative），但要注意 Safari 对radio的border-radius渲染不稳定，圆角建议改用clip-path: circle()备用 - 内容推荐用
content: ""+background-color，比content: "●"更可控、无字体依赖
哪些控件加了 appearance: none 才真有用
别浪费时间在无效目标上：
-
input[type="radio"]和input[type="checkbox"]：能清掉原生图标，值得投入 -
button、input[type="text"]、textarea：可清除内边距、圆角、背景色，iOS ≥16.4 支持较好 -
select、input[type="date"]、input[type="number"]：iOS Safari 中基本无效，Apple 主动拦截；就算加了-webkit-appearance: none，下拉箭头、灰底、不可点击等问题依然存在 - 对
input[type="number"]还要额外处理::-webkit-inner-spin-button { appearance: none }，否则上下小按钮还在
容易被忽略的可访问性细节
视觉美化不能以牺牲可用性为代价：
立即学习“前端免费学习笔记（深入）”；
-
opacity: 0比display: none更安全，前者保留焦点和屏幕阅读器读取能力；但更推荐position: absolute; clip: rect(0 0 0 0)，避免遮挡自定义图标的点击热区 - 必须保留
:focus-visible样式，键盘用户 tab 到单选框时要有明确轮廓 - 禁用状态（
disabled）不能只靠灰度，要同步设置cursor: not-allowed和opacity: 0.5，并确保 aria-disabled="true" - 如果用 SVG data URL 当背景图，记得加
aria-hidden="true"，避免屏幕阅读器重复播报
appearance: none 只是钥匙，门后那套逻辑得你自己搭。 
