<view class="container">
<view class="checkbox1">
默认多选
<label>
<checkbox value="c1" checked="true" />选中
</label>
<label>
<checkbox value="c1" />未选中
</label>
</view>
<view class="checkbox2">
修改多选
<label>
<checkbox value="c2" checked="true" />选中
</label>
<label>
<checkbox value="c2" />未选中
</label>
</view>
<view class="radio1">
<radio-group bindchange="radioChange">
默认单选
<label wx:for="{{items}}" wx:key="{{item.value}}">
<radio value="{{item.value}}" checked="true" />
{{item.name}}
</label>
</radio-group>
</view>
<view class="radio2">
<radio-group bindchange="radioChange">
修改单选
<label wx:for="{{items}}" wx:key="{{item.value}}">
<radio value="{{item.value}}" checked="true" />
{{item.name}}
</label>
</radio-group>
</view>
</view>
.container {
padding: 30px;
}
view {
margin-bottom: 50rpx;
}
.checkbox2 checkbox .wx-checkbox-input {
width: 45rpx;
height: 45rpx;
}
.checkbox2 checkbox .wx-checkbox-input.wx-checkbox-input-checked {
border-color: #FF525C;
background: #FF525C;
}
.checkbox2 checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 30rpx;
height: 30rpx;
line-height: 30rpx;
text-align: center;
font-size: 26rpx;
color: #fff;
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
.radio2 radio .wx-radio-input {
height: 45rpx;
width: 45rpx;
margin-top: -4rpx;
border-radius: 4rpx;
border: 2rpx solid #ccc;
background-color: #fff;
}
.radio2 radio .wx-radio-input.wx-radio-input-checked {
border: 2rpx solid #ccc;
background: #fff;
}
.radio2 radio .wx-radio-input.wx-radio-input-checked::before {
width: 47rpx;
height: 47rpx;
line-height: 47rpx;
text-align: center;
font-size: 36rpx;
color: #ff525c;
background: #fff;
border: 2rpx solid #ccc;
border-radius: 4rpx;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}