appearance-none 是单选框自定义的起点，因浏览器默认 radio 样式不可控且跨浏览器差异大，它能彻底移除原生样式使后续 css 生效，但需配合 relative、伪元素及 focus/checked 状态实现完整交互与视觉效果。
为什么 appearance-none 是单选框自定义的起点
因为浏览器默认的 <input type="radio"> 样式完全不可控，且各浏览器渲染差异大——直接改 background 或 border 没用，它压根不响应这些属性。加 appearance-none 才是真正“卸掉原生皮肤”，让后续所有 CSS 生效的前提。
注意：它只是移除默认样式，不会影响功能或可访问性（只要保留 type="radio" 和配套 label），但会清空焦点 outline，得手动补上。
- 必须和
relative配合使用，方便用伪元素模拟圆点 - 在 Safari 15.4+ 之前，
appearance-none对 radio/checkbox 支持不稳定，建议加-webkit-appearance: none兜底 - 移除后，
:checked状态依然可用，这是驱动样式的唯一可靠钩子
用伪元素画出可点击的自定义圆点
不能靠改 input 本身，得用 ::before 在其位置上“画一个”；同时要把原生控件视觉隐藏但保留可点击区域，否则用户点不到。
input[type="radio"] {
@apply appearance-none w-5 h-5 border-2 border-gray-400 rounded-full relative;
}
input[type="radio"]::before {
@apply absolute inset-0 content-[''] rounded-full opacity-0 transition-opacity;
}
input[type="radio"]:checked::before {
@apply bg-blue-500 opacity-100;
}
-
inset-0让伪元素填满 input 区域，确保点击热区不变 - 不要用
background直接画圆点——那样无法实现“内圈高亮+外圈边框”的双层效果 - 如果需要中间白点（常见设计），再加一层
::after，用transform: scale(0.5)缩小居中
和 label 绑定时容易忽略的交互细节
用户习惯点文字选中选项，但很多人只给 label 加 cursor，忘了 input 本身也需要可聚焦、可键盘操作。
- 必须用
for属性或把input套进label内，否则点击文字无效 -
input要保留focus:outline-none focus:ring-2 focus:ring-blue-500，否则键盘 Tab 切换时看不见焦点位置 - 禁用状态（
disabled）下，不仅 input 要灰掉，label 文字颜色也得同步变text-gray-400，否则视觉割裂 - 别给
label加pointer-events-none——那会让整个标签不可点击
暗色模式下 border 和 bg 的响应式写法
Tailwind 的 dark: 前缀对伪元素无效，::before 里的颜色不能直接写 dark:bg-gray-700。
正确做法是把伪元素样式提到 class 层级，用 group + group-hover 等逻辑组合，或者——更稳妥地——用 @layer components 配合 @apply 在 CSS 中定义暗色规则。
- 推荐方案：用
group包裹input和label，然后写.group:hover .group-hover\:border-blue-500类似逻辑 - 如果项目已启用
darkMode: 'class'，可在上加dark类，然后用.dark input[type="radio"]::before { background-color: #374151; } - 别依赖
prefers-color-scheme媒体查询手写 CSS——Tailwind 的dark:不支持伪元素，硬写会丢失热重载和 PurgeCSS 清理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
