用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画布背景色发生了改变。
原生的checkbox样式不能满足咱们的需求。所以换种方式美化一下
首先，我们需要把checkbox的透明度设置为0： opacity: 0然后我们需要用到span，作为checkbox的选中状态显示。接着span一个背景icon，然后根据icon的分辨率尺寸大小设置背景图片的一些属性，关键是它: background-position-y: 20px，目的是：当checkbox 未选中的时候，让背景图片挪到一个我们看不见的地方去，当checkbox 选中的时候，让背景图片再挪回来，也就是重置为0：background-position-y: 0px，剩下的就是给它一个过渡效果，用户体验就更好啦，最后这样就达到我们的目的啦，具体代码如下：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox美化</title>
</head>
<style type="text/css">
#remember-password-container {
width: 80px
height: 24px
position: absolute
top: 50%
left: 50%
margin:-12px 0 0 -40px
text-align: center
}
#remember-password-container .remember-password-content {
position: relative
}
#remember-password-container input[type=checkbox]{
width: 16px
height: 16px
position: absolute
opacity: 0
cursor: pointer
z-index: 2
font-size: initial
}
#remember-password-container .remember-me-label {
color: #000
margin-left: 25px
cursor: pointer
}
#remember-password-container .remember-me-label::selection{
background: rgba(0,0,0,0)
}
#remember-password-container span {
position: absolute
top: 4px
width: 14px
height: 14px
border: 1px solid #d6d6d6
border-radius: 3px
background: url(img/fork_green.png)
background-size: 14px
background-repeat: no-repeat
background-position-x: 0px
background-position-y: 20px
-webkit-transition: background-position-y 0.1s linear
-o-transition: background-position-y 0.1s linear
transition: background-position-y 0.1s linear
}
#remember-password-container input[type=checkbox]:checked+span {
background-position-y: 0px
}
</style>
<body>
<div id="remember-password-container">
<div class="remember-password-content">
<input type="checkbox" id="remember-me-checkbox">
<span></span>
<label class="remember-me-label" for="remember-me-checkbox">记住我 </label>
</div>
</div>
</body>
</html>
这个其实是js插件模拟的，大致思路是这样子的
先将checkbox隐藏
模拟一个checkbox,其实是div之类的元素，加上背景图片，在将执行选中事件时，就将这个模拟的checkbox添加或移除对应的CSS样式就可以，然后根据选择事件去操作原本隐藏的checkbox
这类的jq插件比较多！给你参考：http://www.oschina.net/news/18435/jquery-plugins-for-styling-checkbox-radio-buttons/
