自定义小程序checkbox样式

在设计购物车时，需要用到checkbox，但通用的样式不满足需求，自己尝试着各种方法后都不满意，于是上网去搜，找的一个非常的方法，记录之。

摘自:http://blog.csdn.net/abs1004/article/details/78922596

.wxml:

   <checkbox-group bindchange="checkboxChange" >
       <label  wx:for="{{cartArr}}">
           <checkbox value="{{index}}"></checkbox>
           <view>{{item.name}}</view>
           <!-- 其他布局代码 -->    
       </label>   
   </checkbox-group>

.wxss

checkbox {
width: 40rpx;
height: 40rpx;
margin-right: 10px;
}
checkbox .wx-checkbox-input{
border-radius: 50%;
width: 40rpx;
height: 40rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
border: none;
background: red;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
border-radius: 50%;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
font-size:30rpx;
color:#fff;
background: transparent;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}