css自定义单选按钮多选按钮

html部分:

<div class="youhuiBox">

        <label for="youhui1">

               <input type="radio" name="youhui" id="youhui1">

               <span></span><p>8元8G校园流量包(流量优惠二选一)</p>

        </label>

</div>

<div class="youhuiBox">

        <label for="youhui2">

                <input type="radio" name="youhui" id="youhui2">

                <span></span><p>20元20G校园流量包(流量优惠二选一)</p>

        </label>

</div>

css部分:

.youhuiBox>label{

       display: flex;

}

.youhuiBox>label>span{

         display: inline-block;

         height: 0.38rem;

         width: 0.38rem;

         border: 0.01rem solid #2ba5b9;

         border-radius: 0.1rem;

        background: none;

        margin-right: 0.2rem;

}

.youhuiBox>label>input[type="radio"]{

}

.youhuiBox>label>input[type="radio"]:checked+span{

        background:url('../images/gou.png') center center/contain;

}

二手闲置小程序 免费信息发布系统功能源码(小程序+php后台管理)

https://blog.csdn.net/MPQ1314/article/details/87162363

猜你喜欢

转载自blog.csdn.net/MPQ1314/article/details/86705066