CSS 美化复选框 - 无图片方式

 

一. Html结构

 

<div class="check-wrap">

     <input type="checkbox" class="icheck" id="icheck" />

     <label for="icheck" class="ilabel"></label>

</div>

注： label 标签的 for 属性值必须指定为 input 的 id 名称。

 

二. CSS 代码

 

.check-wrap{

     position: relative;

     height: 24px;

     width: 24px;

}

.icheck{

     opacity: 0;

}

.ilabel{        

     border-radius: 3px;    

     cursor: pointer;

     display: block;

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 100%;

}

.ilabel:after{

     content: " ";

     border: 2px solid #DDD;        

     display: block;

     font-weight: bold;

     text-align: center;

     border-radius: 3px;

     width: 20px;

     height: 20px;

 }

 .icheck:checked + .ilabel:after{

     content: "✓";

     border-color: #3f51b5;

     background-color: #3f51b5;

     color: #fff;

  }

  .icheck:indeterminate + .ilabel:after{

     content: "■";

     color: #3f51b5;

     background-color: #FFF;

     border-color: #3f51b5;

  }

 

 

1. 将原有的 input 标签透明度设为0

 

2. label:after 的宽高设置 20px 是因为 border 占据了4px

 

3. checkbox 的 indeterminate 状态大家用的可能比较少（效果图中的第2个状态），只能通过 js 进行设置，这种情况通常用在树型结构（即：子节点有选中但并未全部选中的时候父节点的状态）

 

<script>

     var icheck = document.getElementById("icheck");

     icheck.indeterminate = true;

</script>