<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
上面的代码中，我们创建了两个单选按钮，并将它们命名为“gender”，其中一个值为“male”，另一个值为“female”。在上述代码基础上，我们可以为单选按钮添加图标。
2. CSS代码
要为单选按钮添加图标，我们可以使用CSS伪元素::before或::after。使用::before或::after，我们可以在单选按钮的前面或后面创建一个元素，并设置其样式。如下所示：
input[type="radio"]::before {
content: ""; /* 必须要加上content属性 */
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #ccc; /* 给图标一个灰色的边框 */
margin-right: 8px;
}
input[type="radio"]:checked::before {
background-color: #007bff; /* 给选中的按钮图标添加一个蓝色背景颜色 */
}
上述代码中，我们设置了单选按钮的图标样式。我们首先使用::before创建一个空元素，并设置其为“inline-block”类型。然后，我们设置该元素的宽度、高度、边框半径以及灰色边框的边框宽度。最后，在选中单选按钮时，我们设置该元素的背景颜色为蓝色。
3. 最终效果
在完成上述HTML和CSS代码后，我们可以看到如下所示的单选按钮图标效果：
效果图： [ ○ Male ] [ ○ Female ] 上述代码和效果图中，我们可以看到，单选按钮前面添加了一个灰色的圆圈，选中时将其设置为蓝色。这样，我们就可以成功地为单选按钮添加图标了。 总结 在Web开发中，为单选按钮添加图标可以帮助我们更好地展示与用户交互。通过HTML和CSS，我们可以轻松地为单选按钮添加图标。需要注意的是，使用CSS伪元素设置图标时，必须设置其内容（content）属性，否则样式将不会生效。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
