input checkbox样式美化

最近在学校做自己的学习实践项目中，用到了checkbox，想实现的是，在登陆界面的中的那个记住我的选框。我们都知道，原生的checkbox样式不能满足咱们的需求。所以接下来，让我们一起动动手，换种方式美化一下吧。

以下我们将会学到的知识技巧吧：

div居中于页面
checkbox样式美化
label for属性的使用

话不多说，用图说话：

【原生样式】
[美化后样式]
【用到的icon】（可右键保存本地）
这里的icon可以自己去找，我这里用的像素尺寸是32的，大家也可以到iconfont-阿里巴巴矢量图标库网下载：http://www.iconfont.cn

思路

div居中于页面
首先是给div一个宽高，这个为了后面的居中定位，继续，给个绝对定位absolute，其次就是把top和left都设置成50%，这里可能会有的同学说，这样不就可以居中了，其实你仔细的瞅一眼，它并没有居中，我们都知道原点坐标为屏幕的左上角，div定位也是根据自身的左上角来定位，所以我们还需要加上margin-top:-12px ;和margin-left:-40px ;这里的数值就是div宽高的一半，这样，我们就可以看到它居中啦。不过最后还有一个需要注意的地方，假如说我加了一个padding,然后就不居中了。放心一样的道理，假如说我给div加了一个padding: 10px; ，这时需要为margin-top 和 margin-left 在原来的值的绝对值基础上加10 ，如margin-top:-12px ;和margin-left:-40px ; 变成margin-top:-22px ;和margin-left:-50px ; ,这个相加的值是上下和左右padding的各一半。

div {width: 80px;height: 24px;position: absolute;top: 50%;left: 50%;margin:-12px 0 0 -40px ;text-align: center;}

拿本次例子来演示效果图：

- checkbox样式美化
首先，我们需要把checkbox的透明度设置为0： opacity: 0; 然后我们需要用到span，作为checkbox的选中状态显示。接着span一个背景icon，然后根据icon的分辨率尺寸大小设置背景图片的一些属性，关键是它: background-position-y: 20px;，目的是：当checkbox 未选中的时候，让背景图片挪到一个我们看不见的地方去，当checkbox 选中的时候，让背景图片再挪回来，也就是重置为0：background-position-y: 0px;，剩下的就是给它一个过渡效果，用户体验就更好啦，最后这样就达到我们的目的啦，具体代码如下：

input[type=checkbox]{width: 16px;height: 16px;position: absolute;opacity: 0;cursor: pointer;z-index: 2;
}
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;
}
input[type=checkbox]:checked+span {background-position-y: 0px;
}

label for属性的使用
大家有没有发现，在上面代码中，单击记住我的文字没有效果！！！有些同学会问，这是为啥，那我们这里就是解决这个问题，而我又不想用JS去写，这么麻烦，还得if else弄来弄去，对吧。
- HTML for 属性
for 属性规定 label 绑定的表单元素，element_id为label 绑定的元素的 id。使用方法如下：

<label for="element_id">/*例如*/
<input type="checkbox" id="remember-me-checkbox">
<label for="remember-me-checkbox">记住我 </label>

该说的说完了，上代码吧

<!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>

结束语

这个编辑工具使用不是很顺手，大家凑活着看吧，请多多谅解，同时有哪些错误点误导大家的，也请大家留言多多吐槽一起学习。这次笔记就写到这里啦！谢谢大家(^_^)。