checkbox 选中与未选中状态 来自米蒙服务器端渲染项目

1、效果

2、html代码片段

    

        
请选择支付方式
        
            

                
                支付宝支付
            
            

                
                
            
        
        
            

                
                微信支付
            
            

                
                
            
        
        

            确认支付
        
    

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;
        }