看效果:
程式碼:
<radio-group @change="onRadioChange"> <label><radio value="同意" style="margin-right: 30rpx">同意</radio></label> <label><radio value="不同意">不同意</radio></label> </radio-group> // 樣式 radio .wx-radio-input { border-radius: 50%; width: 28rpx; border: 2rpx solid #000; height: 28rpx; } radio .wx-radio-input.wx-radio-input-checked { background: #1677ff; border: 2rpx solid #1677ff; } radio .wx-radio-input.wx-radio-input-checked::before { border-radius: 50%; /* 圓角 */ width: 30rpx; /* 選中後對勾大小,不要超過背景的尺寸 */ height: 30rpx; /* 選中後對勾大小,不要超過背景的尺寸 */ line-height: 30rpx; text-align: center; font-size: 30rpx; /* 對勾大小 30rpx */ color: #fff; /* 對勾顏色 白色 */ background: #1677ff; }