使用背景圖修改radio、checkbox樣式

如果覺得設置樣式太麻煩，或者頁面上選中的樣式太複雜，也可以用背景圖去修改樣式
<div class="">
    <label><input type="radio" name="1"><i class="spot"></i>123456</label>
    <label><input type="radio" name="1"><i class="spot"></i>123456</label>
</div>

<style>
    label{
        display:inline-block;
        width:200px;
        height:50px;
        line-height:.8rem;
        text-align:left;
        position: relative;
    }
    label input{
        width: 15px;
        height: 15px;
        vertical-align: bottom;
        margin-right:.1rem;
        opacity: 0;
    }
    .spot{
        display:inline-block;
        width:17px;
        height:17px;
        background:url("image/radio.png") no-repeat;  /*預設的樣式圖片*/
        background-size:16px;
        position: absolute;
        top:.2rem;
        left:0;
        z-index:5;
    }
    input:checked + .spot{
        background:url("image/checked.png") no-repeat;  /*選中後的樣式圖片*/
        background-size:16px;
    }
</style>