小程序radio自定义样式

modal.png

<view class="modal_shelter  {{modal_showing3==true? 'modal_showing' : ''}}" ></view>
<view class="modal_win2 modal_showing" wx:if='{{modal_showing3}}'>
    <view class="modal2_title">xxxxx</view>
    <view class="modal2_content">
        <radio-group class="radio-group  myradio" bindchange="radioChange">
            <view class="modal2_one" wx:for-items="{{items}}" wx:key  >
                <view class="modal2_name">{{item.name}}</view>
                <radio class="modal2_radio"  checked="{{item.checked}}"></radio>
            </view>
        </radio-group>
    </view>
    <view class="modal2_left_btn modal2_btn" bindtap="hide_shelter2">取消</view>
    <view class="modal2_right_btn modal2_btn">确认</view>
</view>


/*弹窗*/
.modal_win2 {
    display: none;
    position: fixed;
    z-index: 4000;
    top:20%;
    background: #fff;
    width:600rpx;
    left:75rpx;
    border-radius:26rpx;
    padding-bottom:120rpx;
    min-height:450rpx !important;
}
.modal_win2.modal_showing{
    display: block;
}
.modal_shelter.modal_showing {
    opacity: 1;
    transition-duration: 0.3s;
    -ms-transform: scale(1);
    transform: scale(1);
    overflow-x: hidden;
    overflow-y: hidden;
    pointer-events: auto;
}
.myradio{
    overflow-y: scroll;
    max-height: 325rpx;
    margin-bottom:10rpx;
}
.modal2_title{
    font-weight: 500;
    font-size:32rpx;
    color:#333;
    text-align: center;
    padding-top:34rpx;
    padding-bottom:23rpx;
}
.modal2_btn{
    font-size:32rpx;
    width:236rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom:28rpx;
    border-radius:50rpx;
}
.modal2_left_btn{
    border:1px solid #CCCCCC;
    color:#333;
    left:48rpx;
}
.modal2_right_btn{
    background:#DE0805;
    color:#fff;
    right:48rpx;
}
.modal2_one{
    height: 95rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin:0 48rpx;
    border-bottom:1px solid #E5E5E5;
    color:#333;
    font-size:28rpx;
}

.modal2_radio{
    width:40rpx;
    height: 40rpx;
    box-sizing: border-box;
    /* radio{ transform:scale(.8)  } */
}
 .wx-radio-input {
    width:40rpx;
    height: 40rpx;
    border-radius: 50%;     /* 圆角 */
}

.modal2_radio .wx-radio-input.wx-radio-input-checked::before {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%; 
    line-height: 40rpx;
    text-align: center;
    font-size: 30rpx;       /* 勾大小 */
    color: #fff;            /* 白色勾  */
    transform: translate(-50%, -50%) scale(1);
}
.modal2_radio .wx-radio-input.wx-radio-input-checked{
    border-color:red;
    background: red;
 }

/* radio{ transform:scale(.8)  }  不采用这种方法*/




data: {
        modal_showing3:true,
        items:[{
            name:"小米",
            checked:false
        },{
            name:"小米",
            checked:true
        },{
            name:"小米",
            checked:true
        },{
            name:"小米",
            checked:true
        },{
            name:"小米",
            checked:true
        }]
    },
    hide_shelter2(){
        this.setData({
            modal_showing3:false
        })
    },