通过CSS的:checked伪类可动态改变选中单选框的样式；2. 隐藏原始input，利用label模拟按钮外观并关联选中状态；3. 使用相邻兄弟选择器:checked + label更新label的边框、背景等样式；4. 结合transition实现平滑过渡，确保同组radio的name相同以维持互斥性。
当用户选中单选框（radio button）时，可以通过CSS的 :checked 伪类来动态改变其样式，比如边框和背景。虽然单选框本身样式较难直接美化，但结合HTML标签结构与CSS，可以实现高度自定义的视觉效果。
基本原理：利用:checked选择器
:checked 伪类用于匹配被选中的单选框或复选框。通过它，可以控制表单元素本身或其关联元素的样式变化。
通常做法是隐藏原始的 input 元素，用 label 模拟按钮外观，并通过 label 关联 input 的选中状态来触发样式更新。
HTML结构示例
使用 input[type="radio"] 并搭配 label：
立即学习“前端免费学习笔记（深入）”；
<div class="radio-group">
<input type="radio" id="option1" name="choice" value="1">
<label for="option1">选项 1</label>
<input type="radio" id="option2" name="choice" value="2">
<label for="option2">选项 2</label>
</div>
CSS样式设置
先隐藏原始单选框，再为 label 设置可点击区域和初始样式，当选中时通过 :checked + label 改变边框和背景。
.radio-group input[type="radio"] {opacity: 0;
position: absolute;
width: 0;
} .radio-group label {
display: inline-block;
padding: 10px 20px;
margin: 5px;
border: 2px solid #ccc;
border-radius: 6px;
background-color: #f9f9f9;
cursor: pointer;
transition: all 0.3s ease;
} .radio-group input[type="radio"]:checked + label {
background-color: #4CAF50;
border-color: #4CAF50;
color: white;
}
说明与建议
这种写法的关键点在于：
- input 被隐藏但仍然可操作，点击 label 会触发对应 input 的选中
- 使用相邻兄弟选择器 + label 来捕获选中后的 label 样式
- 添加 transition 可使背景和边框颜色变化更平滑
- 确保每个 radio 的 name 相同，才能实现单选互斥
通过这种方式，不仅能改变边框和背景，还能扩展图标、阴影甚至动画效果。基本上就这些，不复杂但容易忽略细节。
