css改變複選框樣式

input[type="checkbox"]{
    -webkit-appearance: none;
    top: 5px;
    float: left;
    position: relative;
    vertical-align:middle;
    margin-top:0;
    background:#fff;
    border:#999 solid 1px;
    border-radius: 3px;
    min-height: 12px;
    min-width: 12px;
}

input[type="checkbox"]:focus {
    outline: none; 
}
input[type=checkbox]:checked::after{
    content: '';
    top: 1px;
    left: 1px;
    position: absolute;
    vertical-align: middle;
    margin-top: 0;
    background: transparent;
    border: #666 solid 2px;
    border-top: none;
    border-right: none;
    height: 6px;
    width: 8px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); 
    transform: rotate(-45deg);
}

 

<input id="check-1" class="checkbox" name="check-1" type="checkbox" value="" />
                           <label for="check-1">複選框樣式</label>