服务器端渲染项目"/>
checkbox 选中与未选中状态 来自米蒙服务器端渲染项目
1、效果
2、html代码片段
<div class="pay_style"><h5>请选择支付方式</h5><label class="b-b noflex clearfix relative" for="zfb"><div class="fl"><img src="~static/images/zfb.png" alt=""><span class="m-l-xs">支付宝支付</span></div><div class="fr"><input type="checkbox" hidden checked id="zfb"><i class="z_c"></i></div></label><label class="noflex clearfix relative" for="wx"><div class="fl"><img src="~static/images/wx.png" alt=""><span class="m-l-xs">微信支付</span></div><div class="fr"><input type="checkbox" hidden id="wx"><i class="z_c"></i></div></label><div class="affirm"><van-button @click.native="$router.push('/goods/paySuccess-mi')" type="primary">确认支付</van-button></div></div>
3、css相关代码
.pay_style .noflex{height: 40px;line-height: 40px;display: block;}/*未选中状态的图片*/.pay_style .z_c{position: absolute;width: 12px;height: 12px;right: 0px;top: 15px;background-position: center;background-repeat: no-repeat;background-image: url("../../static/images/no_checked2.png")}/*选中状态的图片*/.pay_style input[type=checkbox]:checked + .z_c{background-image: url("../../static/images/checked2.png");}.pay_style{background: #fff;padding: 5px 10px;}.pay_style h5{font-weight: normal;font-size: 14px; margin-bottom: 5px;}
更多推荐
checkbox 选中与未选中状态 来自米蒙服务器端渲染项目
发布评论