使用 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属性。正常的请忽略