小程序单选radio-group修改样式

这个排版是真的麻烦，因为上面还有其他的显示，本来觉得很快的，当时弄了一会儿 

checked表示默认选中

        
          备注
          
            
              
                
                一体化
              
              
                
                白卡
              
            
            
              
                
                危险品
              
              
                
                无(默认)
              
            
          
        
      

 

.text_main1{
  font-size: 30rpx;
  color: #495060;
  width: 100%;
  height: 130rpx;
  margin: 30rpx auto;
  margin-left: 30rpx;
}
.text {
  width: 20%;
  margin-top: 6rpx;
  float: left;
  text-align: center;
}
.picker_comment {
  width: 65%;
  margin-left: 20%;
}
.attr_value {
  float: left;
  width: 40%;
  height: 50rpx;
  margin-bottom: 20rpx;
  margin-left: 14rpx;
  margin-right: 25rpx;
  position: relative;
}

.radio_label {
  display: block;
  text-align: center;
  line-height: 50rpx;
}

radio {
  box-sizing: border-box;
  background: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* radio未选中时样式 */

radio .wx-radio-input {
  margin-right: 15rpx;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: none;
  border-radius: 6rpx;
  box-sizing: border-box;
}

/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */

radio .wx-radio-input.wx-radio-input-checked {
  background-color: transparent;
  border-color: #01c2ab;
  overflow: hidden;
  box-sizing: border-box;
}

/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */

radio .wx-radio-input.wx-radio-input-checked::before {
  font-size: 0rpx; /* 对勾大小 去掉 */
}

  data: {
    comment: '',
  },
// 备注
  comment: function(e) {
    this.setData({
      comment: e.detail.value,
    })
  }