将HTML radio单选框自定义为正方形对号样式的CSS实现
在前端开发中，原生radio单选框的样式往往难以满足UI设计需求，例如默认的圆形控件与选中时的圆点效果与很多扁平化、方块化的设计风格不匹配。本文将介绍一种纯CSS方法，将radio单选框隐藏，并用自定义的正方形标签模拟，选中时显示对号（✓）图标。核心思路是利用label标签将原生input与一个自定义的span元素关联，然后通过CSS完全隐藏input，再对span进行方块样式设计，并借助伪元素::after在选中时显示对号。
实现步骤如下：
1. 隐藏原生radio：input { display: none; }。
2. 为模拟控件定义一个类（如.square-radio），设置宽高（如20px×20px）、边框（2px solid #333）、鼠标指针为手型（cursor: pointer）及flex居中等基础样式。
3. 通过::after伪元素添加对号“✓”，默认隐藏（display: none），绝对定位居中。
4. 利用相邻兄弟选择器，当input被选中时（:checked），其后紧跟的.square-radio的后代伪元素显示为块级，并更改颜色（例如#2196F3蓝色）。
完整代码示例如下：
<!DOCTYPE html>
<html>
<head>
<style>
input {
display: none;
}
.square-radio {
display: flex;
position: relative;
width: 20px;
height: 20px;
border: 2px solid #333;
cursor: pointer;
}
.square-radio::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
color: #333;
display: none;
}
input:checked + .square-radio::after {
color: #2196F3;
display: block;
}
</style>
</head>
<body>
<div class="box">
性别：
<label>
男
<input type="radio" name="option">
<span class="square-radio"></span>
</label>
<label>
女
<input type="radio" name="option">
<span class="square-radio"></span>
</label>
</div>
</body>
</html>
此方案仅依赖纯CSS，无需JavaScript，兼容所有现代浏览器。通过调整.square-radio的尺寸、边框颜色、对号字体大小及颜色，可以轻松适配不同设计风格。若需实现圆角正方形，只需在.square-radio上添加border-radius即可。该自定义radio组件的操作逻辑与原生完全一致，被选中的radio在表单提交时依然携带value值。
注意：label标签内的文字（如“男”“女”）需放置在input与span之前或之后，但必须保证input与相邻的span之间无其他元素干扰，否则:checked + .square-radio选择器失效。此方法同样适用于checkbox复选框的自定义样式，只需将input改为input，并对选中时显示的内容进行相应调整。
Re: 将HTML radio单选框自定义为正方形对号样式的CSS实现
这个方法很实用！纯CSS实现的自定义radio既保持了原生语义，又满足了设计需求，代码也很简洁。建议补充一点：如果页面中有多个选项组，记得给不同组的input设置不同的name属性，否则选择会互相影响。另外，`:checked + .square-radio`选择器要求label内input和span必须紧挨着，如果中间插入了文字或其它元素，可以改用`.square-radio`的通用兄弟选择器`~`来保证兼容性。整体思路清晰，对新手很友好，感谢分享！Re: 将HTML radio单选框自定义为正方形对号样式的CSS实现
这个思路很实用，纯CSS实现自定义radio样式确实能省去不少JavaScript的麻烦。代码写得也很简洁，选中时对号变色的效果很直观。 一个小建议：如果想让选中后的对号位置更居中，可以考虑把`.square-radio`设置成`display: inline-flex`，配合`align-items: center; justify-content: center;`，这样就不需要用绝对定位和transform了，代码会更干净一些。另外，对于需要无障碍支持的项目，可能还得保留`input`的`focus`样式（比如用`outline`），这样键盘导航的用户也能看到焦点位置。 谢谢分享，收藏备用～Re: 将HTML radio单选框自定义为正方形对号样式的CSS实现
这个方法很实用，把原生radio隐藏后用span模拟方块加对号，纯CSS实现确实简洁高效，而且对号用伪元素显示完全不用额外标签。我注意到您用的是`input:checked + .square-radio::after`，如果label里文字放在input前面，选择器可能需要调整，不过您已经给出了结构示例，跟着做基本不会出错。另外，如果需要一组radio只能单选，记得所有选项的`name`属性要保持一致，这点您代码里已经做了。谢谢分享，回头我去试试看。
页:
[1]