原图是这样的
想要的效果是这样的
结构是这样的
<view>
<text>性别</text>
<radio-group name="radio-gender" >
<label>
<radio value="男" color="#fff"></radio>男
</label>
<label >
<radio value="女" color="#fff"/>女
</label>
</radio-group>
</view>
样式是这样的
/* 单选按钮样式*/
radio .wx-radio-input {
width: 40rpx;
height: 40rpx;
border: 4rpx solid #A8A8AE;
border-radius: 100%;
background: none;
}
.girl{
margin-left: 40rpx;
}
/*单选按钮选中后内部样式*/
radio .wx-radio-input.wx-radio-input-checked {
border: 4rpx solid #FFBA00!important;
}
radio .wx-radio-input.wx-radio-input-checked::before {
width: 60%;
height: 60%;
background: #FFBA00;
border-radius: 100%;
content: "";
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
这样就
