checkbox 自定义样式

直接上css代码

.checkbox{
        width: 18px;
        height: 18px;
        opacity: 0;
    }
    .checkboxdiy {
        width: 18px;
        margin: 20px 100px;
        position: relative;
    }
    .checkboxdiy label {
        cursor: pointer;
        position: absolute;
        width: 17px;
        height: 17px;
        top: 0;
        left: 0;
        border:1px solid #ccc;
    }
    .checkboxdiy label:after {
        opacity: 0;
        content: '';
        position: absolute;
        width: 9px;
        height: 5px;
        background: transparent;
        top: 2px;
        left: 4px;
        border: 2px solid #333;
        border-top: none;
        border-right: none;

        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .checkboxdiy label:hover::after {
        opacity: 0;
    }
    .checkboxdiy input[type=checkbox]:checked + label:after {
        opacity: 1;
    }

下面是html标签

<div class="checkboxdiy">
      <input type="checkbox" value="1" id="checkboxdiyInput" class="checkbox" name="" />
    <label for="checkboxdiyInput"></label>
  </div>

相关文章： http://meyerweb.com/eric/articles/webrev/200007a.html