微信小程序单选框，复选框修改样式

小程序本来的写法无法满足设计图要求，单选框和复选框需要改成长方形的样式。wxml<view class="txt">您目前的年龄段(单选)：<span class="red">*</span></view><view class="input_list"><radio-group class="radio-label" bindch

zhang-php

5583人浏览 · 2022-04-14 17:40:13

zhang-php · 2022-04-14 17:40:13 发布

小程序本来的写法无法满足设计图要求，单选框和复选框需要改成长方形的样式。

wxml

<view class="txt">您目前的年龄段(单选)：<span class="red">*</span></view>
<view class="input_list">
     <radio-group class="radio-label" bindchange="bindPickerChangeAge">          
         <label class="radio" wx:for="{{agearr}}" wx:key="key">   
         <view><view class="label">{{item}}</view><radio value="{{item}}" /></view>
         </label>          
     </radio-group>
</view>
<view class="txt">您是否已经确诊(可多选)：<span class="red">*</span></view>
<view class="input_list">
     <checkbox-group class="checkbox-label" bindchange="bindPickerChangeIsqz">
         <label class="checkbox" wx:for="{{isqzarr}}" wx:key="key">   
         <view><view class="label">{{item}}</view><checkbox value="{{item}}" /></view>
         </label>     
     </checkbox-group>
</view>

wxss

.txt{ width: 100%; height: 60rpx; line-height: 60rpx; font-size: 30rpx; font-weight: 500; color: #666666; display: flex; }
.txt .red{ color: red; }
.input_list{ width: 100%; height: auto; margin: 0 auto; padding-bottom: 20rpx; }

.radio-label label,.checkbox-label label{ display: inline-block; }
radio .wx-radio-input,checkbox .wx-checkbox-input{ 
  width: 340rpx; 
  height: 60rpx; 
  margin-top: 20rpx; 
  background: #fff; 
  border: solid 1rpx #ccc; 
  border-radius: 10rpx; 
  float: left;
}
.radio-label .label,.checkbox-label .label{ 
  z-index: 1; 
  position: absolute; 
  width: 340rpx; 
  height: 60rpx; 
  line-height: 65rpx; 
  margin-top: 20rpx; 
  font-size: 28rpx; 
  color: #333; 
  text-align: center; 
  border-radius: 10rpx;
}
/*单选，多选按钮选中后背景样式 */
radio .wx-radio-input.wx-radio-input-checked,checkbox .wx-checkbox-input.wx-checkbox-input-checked { 
  width: 340rpx; 
  height: 60rpx; 
  background: #FFF2F2; 
  border: solid 1px #E6322E; 
  border-radius: 10rpx;  
}
/*单选，多选按钮选中后勾勾样式*/
radio .wx-radio-input.wx-radio-input-checked::before,checkbox .wx-checkbox-input.wx-checkbox-input-checked::before { 
  background: #FFF2F2; 
  border-radius: 10rpx; 
  content: ''; 
}

Page({

  /**
   * 页面的初始数据
   */
  data: {    
    agearr: ["16岁—25岁","26岁—35岁","36岁—45岁","46岁—55岁","56岁—65岁","66岁—75岁"],
    isqzarr: ["哮喘","尘肺矽肺","肺气肿","肺大泡","慢阻肺","间质性肺病","慢性支气管炎","肺部纤维化","支气管扩张","肺结节","其他"],
    age: '',
    isqz: ''    
  },
  //年龄
  bindPickerChangeAge: function(e) {
    console.log(e.detail.value)
    this.setData({
      age: e.detail.value
    })
  },
  //是否确诊
  bindPickerChangeIsqz: function(e) {
    console.log(e.detail.value)
    this.setData({
      isqz: e.detail.value
    })
  },


})

效果图如下：