自定义小程序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);
}

《自定义小程序checkbox样式》有1条评论

  1. Hello there! I just want to give you a big thumbs
    up for your excellent information you have right here on this post.

    I’ll be coming back to your blog for more soon.

    回复

发表评论