原生的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"
titlecheckbox美化/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
checkbox的样式写成透明的，放在最上面，你的这个图片作为底图，每次点击复选框用JS判断下，如果是选择底图就是带钩的，没有选中底图换不带钩的。
简单的动画”复选框
设置HTML创建一个标准的无序列表（为了方便测试，特别复制出一份代码）
ul
li
input type="checkbox" name="manager" id="manager" /
label for="manager"Project Manager/label
/li
li
input type="checkbox" name="webdesigner" id="webdesigner" /
label for="webdesigner"Web Designer/label
/li
li
input type="checkbox" name="webdev" id="webdev" /
label for="webdev"Web Developer/label
/li
li
input type="checkbox" name="seo" id="seo" /
label for="seo"SEO/label
/li
li
input type="checkbox" name="itstaff" id="itstaff" /
label for="itstaff"IT Staff/label
/li
li
input type="checkbox" name="csr" id="csr" /
label for="csr"Customer Service Representative/label
/li
/ul
首先，隐藏复选框
/* Hide the Ordinary Checkbox */
input[type="checkbox"] {
display: none;
}
然后需要在我们的列表和标签标记的相对位置和填充设置一些样式。
下一步需要使用伪代码在标签之前和之后设置样式。对于这部分，我们将设置复选框Font Awesome，用一个矢量图标。
/* Checkbox Icons */
label {
position: relative;
padding-left: 30px;
font-size: 30px;
cursor: pointer;
color: #fff;
padding: 16px 28px 0 0;
}
label:before, label:after {
font-family: FontAwesome;
font-size: 50px;
/*absolutely positioned*/
position: absolute; top: 0; left: -49px; right: 10px;
}
现在我们需要设置图标步骤之前和之后的复选框。
label:before {
content: '\f096'; /*checkbox unchecked */
}
label:after {
content: '\f00c'; /*checkbox checked*/
max-width: 0;
overflow: hidden;
opacity: 0.5;
font-size: 27px;
top: 16px;
left: -42px;
color: #f2ca27;
-webkit-transition: all 0.50s;
-moz-transition: all 0.50s;
-o-transition: all 0.50s;
transition: all 0.50s;
}
最后一步是设定一个目标，文本框和复选框后的伪代码，并给它一个最大宽度25像素之间和不透明度1。
/* Animating the Checkbox Icon */
input[type="checkbox"]:checked + label:after {
max-width: 25px;
opacity: 1;
margin-right: 90px;
}
用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画布背景色发生了改变。
1、首先，需要添加一段CSS隐藏所有的Checkbox复选框。要做到点需要添加一段代码到你的CSS文件中。代码如下：
/*** 隐藏默认的checkbox***/
input[type=checkbox] {
visibility: hidden;
}
2、开始创建复选框区的HTML。代码如下：
section
!-- Checbox One --
h3Checkbox 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;
}
复选框选中前。
复选框选中后。
这个其实是js插件模拟的，大致思路是这样子的
先将checkbox隐藏
模拟一个checkbox,其实是div之类的元素，加上背景图片，在将执行选中事件时，就将这个模拟的checkbox添加或移除对应的CSS样式就可以，然后根据选择事件去操作原本隐藏的checkbox
这类的jq插件比较多！给你参考：