功能需要选择支付方式—css实现选中单选按钮样式切换
如图所示
上代码
// 代码片段为选择支付方式模块// 原生效果<div class="order-pay pd border"><div class="label">请选择支付方式</div><div class="item"><input class="check" type="radio" id="wx" name="item" value="选项一"/><div class="check-back"></div><label for="wx"><div class="img"><img src="./img/weixin.png" alt=""></div><div class="method">微信支付</div></label></div><div class="item"><input class="check" type="radio" id="zfb" name="item" value="选项二"/><div class="check-back"></div><label for="zfb"><div class="img"><img src="./img/zfb.png" alt=""></div><div class="method">支付宝支付</div></label></div></div>
/* rem为移动端单位 *//* order-pay */.order-pay{padding: .3rem .2rem;}.order-pay .label{color: #808080;}.order-pay .item{position: relative;height: 1rem;line-height: 1rem;text-align: center;display: flex;}.order-pay .item input{width: .4rem;height: .4rem;margin-top: .35rem;}.order-pay .img{margin: 0 .2rem;}.order-pay img{width: .4rem;height: .4rem;vertical-align: middle;}.order-pay label{height: 1rem;line-height: 1rem;width: 100%;display: flex;margin-left: .45rem;}.order-pay .method{color: #666666;}.check{width: .4rem;height: .4rem;position: absolute;opacity: 0;z-index: 3;}.check-back{width:.4rem;height:.4rem;position: absolute;background: url("./img/check.png");background-size: contain;background-repeat: no-repeat;z-index: 2;top: .35rem;}.item input:checked + .check-back{background: url("./img/checked.png");background-size: contain;background-repeat: no-repeat;}.pay-btn{width:6.8rem;height:1rem;line-height: 1rem;text-align: center;background:rgba(233,86,26,1);color: #fff;border-radius:8px;margin: .2rem auto;}
