介绍
在网页开发中，创建复选框和单选框十分常见，用于收集用户输入。为了增强用户体验，通常我们会在选中复选框或单选框时，添加一个对号来表示选中状态。在本文中，我们将学习如何使用 CSS 创建这样的对号效果。
HTML结构
HTML 结构相对简单，我们只需要创建一个标准的 input 标签即可：
<input type="checkbox" id="checkbox">当然，我们也可以这样创建单选框：
<input type="radio" id="radio">CSS样式
现在我们开始添加样式，使得复选框和单选框有选中状态。首先，我们需要隐藏默认的勾选图标，然后添加一个代表选中的对号。
我们可以将勾选框的外观设置为圆形，并将勾选框和标签分开。此外，我们还要为勾选框的选中状态创建新的样式。
首先，我们将勾选框的外观设置为圆形：
#checkbox, #radio {
border: 2px solid #ddd;
border-radius: 50%;
width: 20px;
height: 20px;
outline: none;
}
然后，我们再将勾选框和标签分开：
label {
display: inline-block;
cursor: pointer;
position: relative;
}
#checkbox, #radio {
display: none;
}
label:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
margin-right: 10px;
border: 2px solid #ddd;
border-radius: 50%;
}
在上面的代码中，我们将标签设置为 inline-block 来防止它被包裹在其他元素中。我们还将其位置设置为 relative。
然后，我们将勾选框设置为 display: none，以隐藏默认的勾选图标。接着，在标签的前面添加一个伪元素，在这个元素中添加代表选择状态的对号。
input:checked + label:before {
content: "\2713";
color: #fff;
text-align: center;
font-size: 20px;
line-height: 24px;
}
在这里，我们使用了 :checked 伪类来表示勾选框被选中。然后，我们使用相邻兄弟选择器 + 选择勾选框后面的标签。接着，我们使用 content 属性来添加代表选中状态的对号，并使用 color 属性来设置对号的颜色。
最后，我们还可以设置对号的大小、字体大小和行高。
完整代码
下面是完整的 HTML 和 CSS 代码，包括复选框和单选框样式：
<input type="checkbox" id="checkbox">
<label for="checkbox">选项1</label>
<input type="radio" id="radio">
<label for="radio">选项2</label>
#checkbox, #radio {
border: 2px solid #ddd;
border-radius: 50%;
width: 20px;
height: 20px;
outline: none;
display: none;
}
label {
display: inline-block;
cursor: pointer;
position: relative;
}
label:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
margin-right: 10px;
border: 2px solid #ddd;
border-radius: 50%;
}
input:checked + label:before {
content: "\2713";
color: #fff;
text-align: center;
font-size: 20px;
line-height: 24px;
background-color: #007bff;
}
总结
在本文中，我们了解了如何使用 CSS 创建复选框和单选框的对号效果。我们首先将勾选框的外观设置为圆形，然后隐藏默认的勾选图标。接着，我们为勾选框的选中状态添加新的样式，并使用伪元素添加代表选中状态的对号。最后，我们可以为这些对号设置样式，如字体大小、行高和背景颜色等。