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宽高的一半，这样，我们就可以看到它居中啦。

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>

结束语

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