使用 CSS 修改 HTML 默認單選（radio）和複選框（checkbox）樣式

第一步編寫DOM. input框是原來的默認框。span是我用來代替的框，採用的背景圖模式

第二步編寫樣式。父容器相對定位，span和input相對定位，定位位置相同，但是注意原生的input不要使用display:none屬性，會點擊不到，採用opacity:0的屬性。然後z-index設置比input高點

.videostatusItem{
    position: relative;
    padding-left: 30px;
}
.videostatusItem span{
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    background:url('../images/uncheck.png') no-repeat center center ;
    background-size: contain;
    left: 10px;
    top: 5px;
}
.dcl,.ybj,.clz{
    width: 33px;
    height: 33px;
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: 100;
    /*display: none;*/
    opacity: 0;
}
.dcl[type=checkbox]:checked+span,.clz[type=checkbox]:checked+span ,.ybj[type=checkbox]:checked+span {
    background: url('../images/checked.png') no-repeat center center;
    background-size: contain;
}

第三步。選中狀態設置選中狀態的圖片即可，圖標顯示不正常的選中的css記得加background-size屬性。正常的請忽略