使用背景图修改radio、checkbox样式

如果觉得使用CSS伪类设置样式太麻烦，或者页面上选中的样式太复杂CSS无法模拟，也可以用背景图去替换样式
<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>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有