-
選中前
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;
}
/* 選中后的 圖標(biāo) 樣式 */
.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);
}
