要使用CSS制作自定义复选框和单选框，需要用到CSS伪类选择器和CSS属性。具体步骤如下：
隐藏原生复选框和单选框
使用CSS的 display: none; 属性来隐藏原生的复选框和单选框。
创建自定义样式的外观
使用CSS的 ::before 和 ::after 伪类选择器来创建自定义的复选框和单选框样式。可以使用CSS属性 content 来插入内容，使用 border、border-radius、background-color、color 等属性来设置样式。
使用CSS的 :checked 伪类选择器来控制选中状态下的样式
可以使用 :checked 伪类选择器来控制选中状态下的样式。例如，可以设置选中状态下的背景颜色和边框颜色。
将自定义样式和原生控件关联起来
使用CSS的 label 元素和 for 属性来将自定义样式和原生控件关联起来。for 属性的值应该与原生控件的 id 属性相同。
下面是一个简单的例子，展示了如何使用CSS制作自定义复选框样式：
<label for="checkbox">
<span class="checkbox"></span>复选框
</label>
<input type="checkbox" id="checkbox">
<style>
input[type="checkbox"] {
display: none;
}
.checkbox {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #fff;
margin-right: 10px;
}
input[type="checkbox"]:checked + .checkbox {
background-color: #007bff;
border-color: #007bff;
}
input[type="checkbox"]:checked + .checkbox::before {
content: '\2713';
display: block;
color: #fff;
text-align: center;
line-height: 20px;
}
</style>在这个例子中，我们将原生复选框隐藏，创建了一个带有边框和圆角的空白方框，并在 :checked 伪类选择器下设置了选中状态的样式。我们还使用 ::before 伪类选择器在选中状态下添加了一个对勾图标。最后，我们使用 label 元素和 for 属性将自定义样式和原生控件关联起来。
类似的，我们也可以使用CSS制作自定义单选框样式。关键是要掌握上述几个步骤，使用 input[type="radio"] 选择器来选中单选框，并使用 label 元素和 for 属性将自定义样式和原生控件关联起来。