前端的小玩意（4）自定义checkbox或者radio的外观

原理：

通过隐藏原有的（调透明度和绝对定位），然后用一个新的图标来覆盖上去

CSS代码：

    .radio { /*这个描述的是输入框的基本样式，透明，绝对定位，浮动在最下*/
        opacity: 0;
        position: absolute;
        z-index: -1; /*这行是让原图标被其他的遮挡，避免挡住其他按钮影响事件触发*/
        <span style="font-family: Arial, Helvetica, sans-serif;">/*  </span>overflow: auto;
        我自己试验后感觉这两行代码并没有必要  */
    }

    .radio[type=checkbox] + span {  /*如果类型是radio，那么这里就是type=radio，当然不写也可以。+span表示这个元素后的第一个span元素*/
        display: inline-block;  /*因为需要写span元素的大小*/
        height: 20px;   /*图标的大小*/
        width: 20px;
        background-image: url(01.png);  /*未选中时的图标*/
        background-position: center;    /*把背景图放在元素的中间显示*/
        position: relative; /*相对定位*/
        top: 3px;   /*可能需要根据实际情况来调整位置*/
        left: 5px;
    }

    .radio[type=checkbox]:checked + span { /*选中时的样式*/
        background-image: url(02.png);
    }

HTML代码：

<label>
    <input type="checkbox" class="radio" name="TableChecked"/>
    <span></span>
    <span>选择磁盘</span>   <!--这个是描述这个checkbox的label内容-->
</label>