CSS复选框是一种常用的Web界面元素。它可以用于让用户进行多项选择或打勾等操作。这里我们来看一下如何使用CSS来创建复选框。

/*  基础复选框样式  */
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 3px;
outline: none;
cursor: pointer;
}
input[type=checkbox]:checked {
background-color: #07c;
border-color: #07c;
}
/*  自定义复选框样式  */
input[type=checkbox].custom {
display: none;
}
input[type=checkbox].custom + label {
display: inline-block;
margin: 5px 0;
position: relative;
cursor: pointer;
}
input[type=checkbox].custom + label:before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 0;
top: 0;
}
input[type=checkbox].custom:checked + label:before {
content: '\2713';
color: #fff;
font-size: 12px;
text-align: center;
line-height: 15px;
background-color: #07c;
border-color: #07c;
}

代码中，我们首先定义了基础复选框的样式。我们使用了appearance属性来去除浏览器默认样式，并设置了宽度、高度、边框等样式。当复选框被选中时，我们设置它的背景色和边框颜色。

然后，我们定义了一个自定义复选框的样式。这个样式隐藏了原本的复选框，并使用label标签来替代它。我们设置了label的位置和样式，并在label前添加一个伪元素:before来替代原本的复选框。当复选框被选中时，我们在:before伪元素上显示一个勾号，并设置它的样式。

通过这种方式，我们可以轻松地实现自定义的复选框样式，使用户体验更加友好。