wxml:

view class=' body ' view class=' body-content '第一题：企业的价值观是？/view view class='label '单选/view/view view class=' options ' radio-group class=' radio-group ' bind change=' radio change ' label class=' radio ' wx : for=' { { items } } ' wx : key=' { { index } } ' view radio value=' { { items } '。“name } }”已选中=“{ { item。已选中} } '/{ { item。value } }/view/label/radio-group/view我们看一下原生的效果：

修改页面结构中的收音机组件的颜色属性：

单选值='{{item.name}} '选中=' { { item。选中} } ' color=' # fff '/{ { item。value } } wxss(只有修改样式的部分):

/* 单选、多选勾选*//*收音机未选中时样式*/收音机wx-收音机-输入{ /*自定义样式.*//* 我这里没有进行，未选中的样式修改高度： 40rpx宽度： 40 rpx页边距-顶部：-4rpx；边界半径： 50%;border: 2rpx固体# 999;背景：透明；*/}/* 选中后的背景样式（红色背景无边框可根据用户界面需求自己修改)*/收音机wx-无线电输入。wx-radio-input-checked {/* border : none；*/border-color: #2792ff！重要；/*背景-color: #fff！重要；*//*背景-颜色：透明！重要；*//* 居中*//*显示： flex正义-内容：中心；align-items:居中；*/}/* 选中后的对勾样式（白色对勾可根据用户界面需求自己修改)*/收音机wx-无线电输入。wx-收音机-输入-在{/*之前检查了：去除对号*/content : " "；/*背景： # fff*/width : 36rpx；高度： 36rpx边界半径： 50%;/* background:红色；*/背景-颜色： # 2792 ff/* 居中*//*页边距-top : 0 rpx；*//*显示： flex*//*相对位置：*/}修改后的单选框样式：

复选框同理

wxml:

view class=' body ' view class=' body-content '第一题：企业的价值观是？/view view class='label '多选/view /view view class='options '复选框-group bind change=' CheckBoxChange ' label class=' checkbox ' wx : for=' { { items } } ' view checkbox value=' { { items } '。“name } }”已选中=“{ { item。已选中} } '/{ { item。value } }/view/label/checkbox-group/view wxss:

/*复选框未选中时样式*/复选框wx-复选框-输入{ /*自定义样式.*/边框-半径：50%；}/* 选中后的背景样式（红色背景无边框可根据用户界面需求自己修改)*/复选框wx-复选框-输入。wx-复选框-输入-检查{/*边框：无；*/边框-半径：50%；边框颜色： #2792ff！重要；}/* 选中后的对勾样式（白色对勾可根据用户界面需求自己修改)*/复选框wx-复选框-输入。wx-复选框-输入-在{/*之前选中：去除对号*/content : " "；/*背景： # fff*/width : 36rpx；高度： 36rpx边界半径： 50%;/* background:红色；*/背景-颜色： # 2792 ff/* 居中*//*页边距-top : 0 rpx；*//*显示： flex*//*相对位置：*/}修改前后对比：

前

后

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。