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
}
复选框选中前。
复选框选中后。
除了用图片之外还有一个办法，就是用css3实现类似的效果。不过css3在ie下支持不好。必须使用支持css3的浏览器才可以，比如谷歌，火狐浏览器等等。一下是代码 供参考：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>源码小筑-CSS3复选框和单选按钮美化</title>
<style type="text/css">
#holder {
width: 100%
}
.regular-checkbox {
display: none
}
.regular-checkbox + label {
background-color: #fafafa
border: 1px solid #cacece
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05)
padding: 9px
border-radius: 3px
display: inline-block
position: relative
}
.regular-checkbox:checked + label {
background-color: #e9ecee
border: 1px solid #adb8c0
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1)
color: #99a1a7
}
.regular-checkbox:checked + label:after {
content: '\2714'
font-size: 14px
position: absolute
top: -15px
left: 3px
color: red
}
.big-checkbox + label {
padding: 18px
}
.big-checkbox:checked + label:after {
font-size: 50px
left: 15px
}
</style>
</head>
<body>
<div id="holder">
<center>
<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" /><label for="checkbox-2-1"></label>
</center>
</div>
</body>
</html>
顺便打个广告，推荐一个特效网站 源码小筑-http://www.codevillas.com，呵呵
用css3可以直接用图片作为背景就可以了，不需要用js。解决方法如下：
1、双击打开HBuilderX开发工具，在Web项目中新建静态页面canvas.html。
2、打开已新建的canvas.html文件，修改title标签里的文字内容。
3、在<body></body>标签内，插入一个canvas标签，并设置id属性值。
4、在canvas标签下，添加script标签并初始化canvas对象，调用自带的方法。
5、保存代码并运行项目，打开浏览器查看界面效果，可以发现绘制了一条线。
6、在style标签中，利用ID选择器设置canvas样式，添加背景色设置。
7、再次保存代码文件，并刷新浏览器，可以看到canvas画布背景色发生了改变。
