在网页表单开发中，原生的单选按钮样式由浏览器默认渲染，很难和个性化的页面设计风格统一，通过CSS选择器可以完全自定义单选按钮的外观，同时保留原生的交互功能。
基础HTML结构搭建
首先需要搭建包含原生单选按钮和自定义显示元素的HTML结构，原生单选按钮需要保留以实现表单提交和原生交互逻辑，后续会通过CSS将其隐藏。
<form class="custom-radio-form">
<label class="radio-item">
<input type="radio" name="gender" value="male">
<span class="custom-radio"></span>
<span class="radio-text">男</span>
</label>
<label class="radio-item">
<input type="radio" name="gender" value="female">
<span class="custom-radio"></span>
<span class="radio-text">女</span>
</label>
</form>
这里使用label标签包裹整个单选选项，点击文字区域也能触发单选按钮的选中状态，提升用户交互体验。
隐藏原生单选按钮
原生单选按钮的样式无法直接修改，需要先将其隐藏，同时要保证元素仍然存在于DOM中，不影响表单提交和键盘交互。
/* 隐藏原生单选按钮 */
.radio-item input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
这里使用opacity: 0配合绝对定位的方式隐藏元素，相比display: none不会让元素完全脱离文档流，保留键盘焦点的获取能力。
使用CSS选择器设计自定义样式
未选中状态样式
通过CSS选择器选中custom-radio类元素，设计未选中时的外观，比如圆形边框、背景色等。
/* 自定义单选按钮基础样式 */
.custom-radio {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #ccc;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
transition: all 0.2s ease;
position: relative;
}
选中状态样式
使用:checked伪类选择器匹配被选中的单选按钮，再通过相邻兄弟选择器+选中对应的自定义单选按钮，修改其样式表示选中状态。
/* 选中状态下的自定义单选按钮样式 */
.radio-item input[type="radio"]:checked + .custom-radio {
border-color: #409eff;
}
/* 选中时的内部圆点 */
.radio-item input[type="radio"]:checked + .custom-radio::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: #409eff;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
焦点状态样式
为了提升可访问性，还需要为获取焦点的单选按钮添加样式，使用:focus伪类选择器实现。
/* 焦点状态下的样式 */
.radio-item input[type="radio"]:focus + .custom-radio {
box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
}
完整示例代码
以下是整合所有样式的完整实现代码，可以直接复制到项目中使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义单选按钮示例</title>
<style>
.custom-radio-form {
padding: 20px;
font-family: Arial, sans-serif;
}
.radio-item {
display: block;
margin-bottom: 12px;
cursor: pointer;
font-size: 14px;
color: #333;
}
/* 隐藏原生单选按钮 */
.radio-item input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* 自定义单选按钮基础样式 */
.custom-radio {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #ccc;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
transition: all 0.2s ease;
position: relative;
}
/* 选中状态下的自定义单选按钮样式 */
.radio-item input[type="radio"]:checked + .custom-radio {
border-color: #409eff;
}
/* 选中时的内部圆点 */
.radio-item input[type="radio"]:checked + .custom-radio::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: #409eff;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 焦点状态下的样式 */
.radio-item input[type="radio"]:focus + .custom-radio {
box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
}
.radio-text {
vertical-align: middle;
}
</style>
</head>
<body>
<form class="custom-radio-form">
<label class="radio-item">
<input type="radio" name="gender" value="male">
<span class="custom-radio"></span>
<span class="radio-text">男</span>
</label>
<label class="radio-item">
<input type="radio" name="gender" value="female">
<span class="custom-radio"></span>
<span class="radio-text">女</span>
</label>
</form>
</body>
</html>
注意事项
- 所有单选按钮的
name属性需要保持一致，才能保证同一组选项只能选中一个 - 隐藏原生单选按钮时不要使用
display: none，避免影响键盘导航和屏幕阅读器识别 - 如果需要兼容旧版本浏览器，需要测试
:checked伪类选择器的支持情况
CSS选择器自定义单选按钮radio_buttonsHTML表单修改时间：2026-07-04 00:39:33