使用背景图修改radiocheckbox样式

Posted 2020-10-18 大_瑶

如果觉得设置样式太麻烦，或者页面上选中的样式太复杂，也可以用背景图去修改样式
<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>