效果
<radio-group class="group" name="aaa">
<label class="answer-item">
<radio value="111" />选项1
</label>
</radio-group>
选项是循环出来的,上边的代码里我把循环删了,主要看css样式
radio {
width: 30rpx;
height: 30rpx;
margin-right: 20rpx;
}
radio .wx-radio-input {
height: 24rpx;
width: 24rpx;
border-radius: 50%;
border: 3rpx solid #4e99fe;
background: #fff;
}
radio .wx-radio-input.wx-radio-input-checked {
border-color: #4e99fe;
background-color: #fff;
}
radio .wx-radio-input.wx-radio-input-checked::before {
width: 15rpx;
height: 15rpx;
line-height: 15rpx;
background: #4e99fe;
border-radius: 50%;
/* 隐掉了默认的对勾 */
font-size: 0rpx;
text-align: center;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}