for example, I have a checkbox group of Mini Program as follows:
<checkbox-group bindchange="facilitiesChange">
<checkbox wx:for="{{facility_list}}" wx:key="*this" value="{{item}}" class="list-checkbox iconfont .icon-{{item}}">
<text>{{facility_name[index]}}</text>
</checkbox>
</checkbox-group>at the same time, I have a corresponding style file:
.wx-checkbox-input {
display: none;
}
.list-checkbox {
width: 100rpx;
height: 100rpx;
font-size: 60rpx;
line-height: 100rpx;
color: -sharpeee;
text-align: center;
}
.list-checkbox text {
font-size: 24rpx;
font-weight: 600;
white-space: nowrap;
}
.list-checkbox[checked] {
color: -sharp9e9e9e;
}but the actual display effect is not expected:
DOM:
checkbox
text
DOMDOM
P.S. viewcheckoubox:
:
