input checkbox样式美化

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的