在网页开发中，HTML原生的<input type="radio">和<input type="checkbox">控件样式由浏览器默认渲染，往往和项目的设计风格不匹配，使用CSS自定义这两类控件的样式是前端开发中的常见需求。
修改核心思路
由于原生单选和复选框的直接样式修改支持有限，通用的实现方案是隐藏原生控件，然后利用<label>标签和可关联的<input>控件，通过伪元素构建自定义的控件外观，再根据<input>的选中状态切换自定义样式的显示。
基础HTML结构
首先需要准备关联的<input>和<label>结构，注意<input>要放在<label>内部或者设置<label>的for属性对应<input>的id，保证点击<label>时可以触发<input>的状态切换。
<!-- 单选框结构 --> <label class="custom-radio"> <input type="radio" name="gender" value="male"> <span class="radio-mark"></span> 男 </label> <label class="custom-radio"> <input type="radio" name="gender" value="female"> <span class="radio-mark"></span> 女 </label> <!-- 复选框结构 --> <label class="custom-checkbox"> <input type="checkbox" value="read"> <span class="checkbox-mark"></span> 阅读 </label> <label class="custom-checkbox"> <input type="checkbox" value="sport"> <span class="checkbox-mark"></span> 运动 </label>
自定义单选框样式实现
接下来编写CSS代码，先隐藏原生的单选框，再构建自定义的单选外观，最后处理选中状态的样式切换。
/* 隐藏原生单选框 */
.custom-radio input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* 自定义单选框容器样式 */
.custom-radio {
display: inline-flex;
align-items: center;
margin-right: 16px;
cursor: pointer;
font-size: 14px;
color: #333;
}
/* 自定义单选框外观容器 */
.radio-mark {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #ccc;
border-radius: 50%;
margin-right: 6px;
position: relative;
transition: border-color 0.2s ease;
}
/* 选中状态的单选框外圈样式 */
.custom-radio input[type="radio"]:checked + .radio-mark {
border-color: #1677ff;
}
/* 选中状态的单选框内圆样式 */
.custom-radio input[type="radio"]:checked + .radio-mark::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #1677ff;
}
/* 鼠标悬停效果 */
.custom-radio:hover .radio-mark {
border-color: #1677ff;
}
自定义复选框样式实现
复选框的实现思路和单选框类似，只是外观从圆形改为方形，选中状态可以显示为对勾样式。
/* 隐藏原生复选框 */
.custom-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* 自定义复选框容器样式 */
.custom-checkbox {
display: inline-flex;
align-items: center;
margin-right: 16px;
cursor: pointer;
font-size: 14px;
color: #333;
}
/* 自定义复选框外观容器 */
.checkbox-mark {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #ccc;
border-radius: 4px;
margin-right: 6px;
position: relative;
transition: all 0.2s ease;
}
/* 选中状态的复选框样式 */
.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark {
background-color: #1677ff;
border-color: #1677ff;
}
/* 选中状态的对勾样式 */
.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark::after {
content: "";
position: absolute;
left: 5px;
top: 2px;
width: 5px;
height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* 鼠标悬停效果 */
.custom-checkbox:hover .checkbox-mark {
border-color: #1677ff;
}
注意事项
- 隐藏原生<input>时不要使用
display:none，否则可能会导致控件无法被键盘聚焦，影响无障碍访问，推荐使用绝对定位加透明度隐藏的方式。 - 如果项目需要兼容旧版本浏览器，需要测试伪元素和相邻兄弟选择器的支持情况，必要时可以调整实现方案。
- 自定义样式的尺寸和颜色可以根据项目的设计需求灵活调整，只需要修改对应CSS属性的值即可。