微信小程序checkbox多选框如何修改宽高及选中样式
微信小程序checkbox多选框如何修改宽高及选中样式呢，我看到网上有很多教程都是使用的transform: scale(0.6,0.6);缩放或放大，虽然实现了放大缩小，但并不能适配不同的屏幕，其实是有css可以控...
微信小程序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>
这种方法就是利用的动画的缩放属性 无法兼容各种屏幕，大家使用第一种就好了。
- 发表于 2020-07-29 13:58
- 阅读 ( 646 )
- 分类：web前端开发
