核心思路是隐藏原生单选框并用label模拟样式，通过label的for属性关联input，利用:checked伪类和伪元素创建自定义外观，同时保持可访问性与功能完整。
CSS创建自定义单选框的核心思路其实很简单：我们不直接去修改浏览器默认的那个丑丑的
元素，而是选择把它“藏”起来，然后利用它关联的 元素来绘制我们想要的样式。当用户点击这个自定义的“标签”时，底层的隐藏input依然会被触发，从而保持功能上的完整性。
.radio-group {
display: flex;
flex-direction: column;
gap: 15px;
padding: 20px;
border: 1px solid #eee;
border-radius: 8px;
background-color: #f9f9f9;
}
/* 隐藏原始的单选框，但保持其可访问性 */
.radio-group input[type="radio"] {
/*
* 这种隐藏方式比 display: none; 或 visibility: hidden; 更优，
* 因为它允许屏幕阅读器和键盘导航仍然访问到元素。
*/
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap; /* 防止内容折行 */
border: 0;
}
/* 样式化标签，使其看起来像一个自定义的单选框 */
.radio-group label {
display: inline-flex; /* 允许内部元素对齐 */
align-items: center; /* 垂直居中对齐 */
cursor: pointer;
font-size: 16px;
color: #333;
user-select: none; /* 防止文本被选中 */
padding: 8px 0; /* 给文本一些垂直空间 */
}
/* 创建自定义的圆形外观 */
.radio-group label::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 50%; /* 圆形 */
margin-right: 10px; /* 与文本的间距 */
background-color: #fff;
box-sizing: border-box; /* 边框包含在尺寸内 */
transition: all 0.2s ease-in-out; /* 平滑过渡 */
flex-shrink: 0; /* 防止被挤压 */
}
/* 选中时的样式：外圈变色，并显示内点 */
.radio-group input[type="radio"]:checked + label::before {
border-color: #007bff; /* 选中时边框颜色 */
background-color: #007bff; /* 选中时背景色 */
}
/* 选中时的内点 */
.radio-group input[type="radio"]:checked + label::after {
content: '';
display: block;
width: 10px; /* 内点大小 */
height: 10px;
border-radius: 50%;
background-color: #fff; /* 内点颜色 */
position: absolute; /* 相对于父级标签定位 */
left: 7px; /* 调整位置使其居中 */
top: 14px; /* 调整位置使其居中 */
transform: translate(-50%, -50%); /* 精确居中 */
/*
* 这里需要一个更巧妙的定位，因为::after是::before的兄弟元素，
* 更好的做法是把::after放在::before内部，或者调整left/top相对于label。
* 考虑到label::before已经有了，我们可以把内点放在label::before里面，
* 或者让label::after相对于label定位，并调整其位置到::before的中心。
*
* 修正：让内点基于::before来定位，这需要稍微调整CSS结构或使用嵌套的伪元素。
* 最直接的方法是让::before作为容器，并在其内部通过伪元素创建内点，
* 但CSS无法直接嵌套伪元素。所以，我们通常让::after也作用于label，
* 然后调整其位置到::before的中心。
*/
transition: all 0.2s ease-in-out;
opacity: 1; /* 默认显示 */
}
/* 修正内点定位，使其更准确地在自定义圆圈内 */
.radio-group input[type="radio"]:checked + label::after {
content: '';
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
/* 相对于label定位，然后微调到::before的中心 */
position: absolute;
left: 12px; /* 2px border + 10px margin-right + 20px width / 2 - 10px / 2 = 7px */
top: 50%; /* 垂直居中 */
transform: translateY(-50%);
opacity: 1;
transition: all 0.2s ease-in-out;
}
/* 未选中时内点隐藏 */
.radio-group label::after {
content: '';
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: transparent; /* 默认透明 */
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
opacity: 0; /* 默认隐藏 */
transition: all 0.2s ease-in-out;
}
/* 焦点样式：为键盘用户提供视觉反馈 */
.radio-group input[type="radio"]:focus-visible + label::before {
outline: 2px solid #007bff; /* 蓝色轮廓 */
outline-offset: 2px; /* 轮廓偏移 */
}
/* 鼠标悬停效果 */
.radio-group label:hover::before {
border-color: #0056b3;
}为什么我们要费力去自定义这些小小的单选框？
说实话，每次看到浏览器默认的单选框样式，我内心都有些崩溃。它们在不同的浏览器里长得不一样，在Windows和macOS上更是天差地别，而且通常都显得非常“老旧”，跟现代网页设计格格不入。作为一个追求像素级完美的开发者，这种视觉上的不统一简直是强迫症的噩梦。
自定义单选框，不单单是为了好看。它更关乎用户体验的一致性和品牌形象的统一。想象一下，如果你的网站到处都是系统默认的组件，那用户会觉得你的设计是不是偷懒了？自定义，意味着你能完全掌控这些交互元素的外观，让它们融入你的整体设计语言，无论是颜色、大小、圆角，还是选中时的动画效果，都能做到与众不同。这就像给你的网站穿上了一套量身定制的西装，而不是随便套件现成的T恤。而且，通过合理的自定义，我们甚至可以优化点击区域，让用户操作起来更舒服，这可不是小事。
确保自定义单选框的无障碍性：不仅仅是视觉上的美观
自定义组件最容易踩的坑，就是为了视觉效果而牺牲无障碍性。我们把原生的
input隐藏了，但它仍然是整个交互逻辑的核心。所以，务必确保屏幕阅读器和键盘用户能够正常地使用它们。
立即学习“前端免费学习笔记（深入）”；
首先，也是最重要的，就是
label标签的
for属性要准确地指向它所关联的
input的
id。这是建立语义关联的基础，屏幕阅读器会通过这个关联告诉用户：“你现在正在操作的是哪个选项。”如果这个链接断了，那么隐藏的
input对辅助技术来说就等同于不存在。
其次，键盘导航。用户应该能够通过 Tab 键在不同的单选框之间切换，并且当某个单选框获得焦点时，应该有清晰的视觉反馈。这就是
:focus-visible伪类的用武之地。它能确保只有通过键盘导航获得焦点的元素才显示焦点样式，而鼠标点击时则不会出现，这能让界面看起来更干净，同时又不牺牲无障碍性。
我个人在开发中，特别喜欢用
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);这种方式来隐藏
input。因为它比
display: none;或
visibility: hidden;更“友好”，元素虽然不可见，但仍然存在于DOM中，并且可以被辅助技术访问到，这才是真正做到了“隐藏而不丢失”。
调试自定义单选框时常遇到的那些小麻烦
即便原理看似简单，但在实际开发中，自定义单选框还是会冒出一些让人头疼的问题。
一个很常见的错误就是
label的
for属性与
input的
id不匹配，或者干脆就忘了写。结果就是，你点击自定义的“圆圈”或文本，单选框根本没反应。这时候，打开浏览器开发者工具，检查一下
label和
input的
id/
for属性，通常就能发现问题。
另一个让人抓狂的可能是 CSS 样式冲突或者优先级问题。你明明写了样式，但它就是不生效，或者被其他样式覆盖了。这时候，开发者工具的“样式”面板就成了你的救星，它能清晰地展示哪些样式被应用了，哪些被覆盖了，以及它们的优先级。有时候，一个简单的
!important就能解决燃眉之急（虽然不推荐滥用），或者调整一下选择器的特异性。
再来就是
:checked伪类不生效的问题。这通常发生在
input和
label的 HTML 结构没有紧密相连时，例如它们被一个不相关的父元素隔开了，导致
+（相邻兄弟选择器）无法生效。确保
input和
label是紧邻的兄弟元素，或者使用更通用的选择器（比如
input[type="radio"]:checked ~ label，但这就要求
label必须在
input之后）。
最后，别忘了跨浏览器兼容性。虽然现代浏览器对 CSS 的支持越来越好，但一些边缘情况或者旧版本浏览器可能仍然会有表现差异。在不同的浏览器和设备上进行测试是必不可少的一步，毕竟，我们希望用户无论用什么设备，都能获得一致且流畅的体验。
