微信小程序checkbox多选框如何修改宽高及选中样式

微信小程序checkbox多选框如何修改宽高及选中样式呢，我看到网上有很多教程都是使用的transform: scale(0.6,0.6);缩放或放大，虽然实现了放大缩小，但并不能适配不同的屏幕，其实是有css可以控制的方法的，请看下面代码。

 

wxml 代码

<checkbox-group>
    <label>
        <checkbox></checkbox>   
    </label>
</checkbox-group>

 

wxss 代码

checkbox .wx-checkbox-input {
width: 34rpx;
height: 34rpx;
border-radius: 50%;
}
/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #0394F0;
  border-color:#0394F0;
}
/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 20rpx;
  height: 20rpx;  
  line-height: 20rpx;
  text-align: center;
  font-size: 22rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

效果：

 

 

以下是网络上流传的方法 我给粘贴过来了不建议使用

.cb{
transform: scale(0.6,0.6);
}

 

<view>
<label class="lab" for="box1">
<checkbox value="v1" checked class="cb" />复选框
</label>
</view>

这种方法就是利用的动画的缩放属性  无法兼容各种屏幕，大家使用第一种就好了。


你可能会用到以下内容：

微信小程序checkbox多选框如何修改宽高及选中样式