1、首先，需要添加一段CSS隐藏所有的Checkbox复选框。要做到点需要添加一段代码到你的CSS文件中。代码如下：
/*** 隐藏默认的checkbox***/
input[type=checkbox] {
visibility: hidden
}
2、开始创建复选框区的HTML。代码如下：
<section>
<!-- Checbox One -->
<h3>Checkbox One</h3>
<div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxOneInput" name="" />
<label for="checkboxOneInput"></label>
</div>
</section>
3、用一个DIV元素包含checkbox，使用它们来做黑色条带和圆角。代码如下：
/*** Create the slider bar***/
.checkboxOne {
width: 40px
height: 10px
background: #555
margin: 20px 80px
position: relative
border-radius: 3px
}
4、当选中复选框后的判定代码。代码如下
/*** Move the slider in the correct position if the checkbox is clicked**/
.checkboxOne input[type=checkbox]:checked + label {
left: 27px
}
复选框选中前。
复选框选中后。
1、打开网页开发工具，新建一个HTML文件。
2、编写HTML：表单复选框。
3、编写CSS：复选框的样式。
4、编写CSS部分：复选框选中后的样式。
5、最好打开浏览器预览效果，满意保存即可。
注意事项
复选框提供一个制造单一选择开关的方法；它包括一个小框和一个标签。典型的复选框有一个小的“X”（或者它设置的其它类型）或是空的，这依靠项目是否被选择来决定的。
