核心思路是隐藏原生单选框并用label模拟样式，通过label的for属性关联input，利用:checked伪类和伪元素创建自定义外观，同时保持可访问性与功能完整。
css创建自定义单选框的核心思路其实很简单：我们不直接去修改浏览器默认的那个丑丑的
<input type="radio">
元素，而是选择把它“藏”起来，然后利用它关联的
<label>
元素来绘制我们想要的样式。当用户点击这个自定义的“标签”时，底层的隐藏
input
依然会被触发，从而保持功能上的完整性。
<div class="radio-group"> <input type="radio" id="optionA" name="choice" value="A"> <label for="optionA">选项 A</label> <input type="radio" id="optionB" name="choice" value="B"> <label for="optionB">选项 B</label> <input type="radio" id="optionC" name="choice" value="C"> <label for="optionC">选项 C</label> </div>
.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 的支持越来越好，但一些边缘情况或者旧版本浏览器可能仍然会有表现差异。在不同的浏览器和设备上进行测试是必不可少的一步，毕竟，我们希望用户无论用什么设备，都能获得一致且流畅的体验。
