-
选中前
image -
选中后
image
WXML代码
<view class="cart-check-box">
<checkbox class="checkbox"></checkbox>
</view>
WXSS代码
/* 多选框样式 */
.cart-check-box .wx-checkbox-input{
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
/* 多选框选中后的样式 */
.cart-check-box .wx-checkbox-input.wx-checkbox-input-checked {
background: #f95a5f;
border-color: #f95a5f;
}
/* 选中后的 图标 样式 */
.cart-check-box .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 25rpx;
height: 25rpx;
line-height: 25rpx;
text-align: center;
font-size: 22rpx;
color: #fff;
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
