不使用js改变input下的checkbox样式，并用css3绘制对勾

首先是一段废话，好久没写博客了，自己要凉了，先发一篇，最近在一帖子上看见css3画图，感觉好有趣，然后研究了一下，明后天再发一篇，hahah~~

checkbox初始样式

checkbox：初始样式如下图所示：

初始化的勾选框过于僵硬，因此有时候需要重新绘制复选框的样式

改变checkbox步骤

1. 先编写html代码 代码如下：

     <div class="box">
     		<input type="checkbox" name=""> 
            <span></span>
     </div>

2. 编写css代码
   代码如下：注意此时span中的css样式的定位是为了与复选框进行重合

.box { 
	position:relative;
      width: 40px;
      height: 40px;
      margin:100px auto; 
} 
input {
      width:100%; 
      height:100%;
      outline:0;
      border:0;
} 
span {
      position:absolute;
       width: 100%;
       height: 100%;
       top:3px;
       left:3px;
 }

3. 利用复选框选中
   （1）主要是利用兄弟元素的伪元素来进行画图，也就是span标签。在进行对勾显示的时候，需要把input标签置于顶层，否则不能选中，在input标签被选中的时候，显示span所画的图形。
   （2）对勾主要是利用border来进行绘制，主要侧重使用的属性是border-color：transparent；属性。设置这个属性的时候，边框的颜色是与父类的颜色一致，可以简单的理解为透明色。
   （3）利用span的before以及after来绘制一个三角形，最后利用定位，让二者之间的距离相差一些。也就是让after覆盖住before，使得before留下对勾的样子。搭配使用rotate旋转一下就好啦~

具体代码如下：（ps：这是完整版的代码，区分于开始，另外命名~）

.check {
    width: 14px;
    height: 14px;
    border:1px solid #ccc;
    margin:0 auto;
    margin-left:6px;
 } 
.check input {
     width: 14px;
     height: 14px;
     position:absolute;
     top:0;
     left:0;
     z-index:1;
     opacity:0; }
.check input:checked+span::after {
     display: block;
     content:'';
     border-top:5px solid transparent;
     border-left:5px solid transparent;
     border-bottom:8px solid white;
     border-right:5px solid white;
     transform:rotate(20deg);
     position:absolute;
     top:-3px;
     left:1px; }
.check input:checked+span::before {
     display: block;
     content:'';
     border-top:5px solid transparent;
     border-left:5px solid transparent;
     border-bottom:8px solid #949494;
     border-right:5px solid #949494;
     transform:rotate(20deg);
     position:absolute;
     top:-1px;
     left:2px; }
.check span {
     display: block;
     width: 100%;
     height: 100%;
     position:absolute;
     top:0;
     left:0;
}

实现结果图

ps：结束~ 如有不正确的，欢迎指正啦~
然后，我居然只保存，不发出去，给蠢死啦