微信小程序之自定义单选框radio和复选框和checkbox的样式

刚开始小程序出来那会研究过自定义radio和checkbox的样式，在后来的升级中，原先写的样式出现了一些问题，

例如：

1、未选中和选中时按钮大小不一，导致view盒子高度变化，出现晃动；

2、选中后出现按钮还有原始的默认背景（绿色）；

这是升级后的，主要还是觉得自定义样式能使我们在小程序的开发中减少图片的加载以及内存；同时后期的维护也更加便利；

更改radio的样式，效果如下图：

wxml:

<view class='item ft-30 h90 flex flex-vc bd-bt-f4f pd-lt20 pd-rt20'>
     <label class='item-left color-333 mg-rt10' for='sex'>性别：</label>
     <radio-group class="item-right radio-group" bindchange="changeSex">
          <label class="radio" wx:for="{{items}}">
               <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}
          </label>
     </radio-group>
</view>

css:

/* 自定义 radio 样式 */
radio{
    width: 38rpx;
}

radio .wx-radio-input{
    border-radius: 50%; 
    width: 28rpx;
    height: 28rpx;
}

/* 选中后的样式 （可根据设计稿需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked::before{
    border-radius: 50%;
    width: 44rpx; 
    height: 44rpx; /
    line-height: 44rpx;
    text-align: center;
    font-size: 26rpx; /* 对勾大小 26rpx */
    color:#fff; /* 对勾颜色 */
    background: #2facff;
    border-color: #2facff;
}

js:

Page({
    data: {
        items:[
            { name: '男', checked: true},
            { name: '女', checked: false}
        ],
    }
})

更改checkbox的样式，效果如下图：

wxml:

<checkbox-group bindchange="checkAll" class="text-left flex flex-vc pd-lr30">
    <label class="checkbox ft-30">
        <checkbox value='all' checked="{{selectAllStatus}}"/>全选
    </label>
</checkbox-group>

css:

/* 自定义 checkbox 样式 */
checkbox-group{
    width: 50rpx; 
}

/* 未选中的 背景样式 */
checkbox .wx-checkbox-input{
    border-radius: 50%;/* 圆角 */
    width: 40rpx; /* 背景的宽 */
    height: 40rpx; /* 背景的高 */
}

/* 选中后的样式 （可根据设计稿需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
    background: #2facff;
    border-color: #2facff;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
    border-radius: 50%;
    width: 46rpx;
    height: 46rpx;
    line-height: 46rpx;
    text-align: center;
    font-size: 28rpx; /* 对勾大小 28rpx */
    color: #fff; /* 对勾颜色 白色 */
    background: transparent;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
}

js:

Page({
    data: {
        selectAllStatus: false,  //底部全选
    }
})

来源：CSDN

作者：刺鸟_前端

链接：https://blog.csdn.net/Hug_rj/article/details/82017393

标签

radio

radio选中

checkbox样式

小程序

border-radius