微信小程序修改radio和checkbox选中颜色

最新推荐文章于 2025-06-20 23:44:18 发布

我会玩射手

最新推荐文章于 2025-06-20 23:44:18 发布

阅读量414

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/parkbomd/article/details/146096194

微信小程序专栏收录该内容

7 篇文章

订阅专栏

可以根据自己需求改动

wxss：

.checkType {
    /* height: 100rpx;
    line-height: 100rpx; */
    display: flex;
    width: 90%;
    margin: 0 5%;
    flex-direction: column;
}

.checkType-item {
    /* width: 50%; */
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.RADIO {
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    width: 90%;
    margin: 0 5%;
    justify-content: space-around;
    border-bottom: 1px solid #F0F0F0;
}


radio .wx-radio-input.wx-radio-input-checked::before {
    color: #fff;
}

radio .wx-radio-input.wx-radio-input-checked {
    border-color: #1677FF !important;
    background-color: #1677FF !important;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    color: #fff;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    border-color: #1677FF !important;
    background-color: #1677FF !important;
}

wxml：

 <radio-group bindchange="radioChange" class="RADIO" data-type="{{vo.id}}" data-code="{{vo.answerCode}}">
                                                    <label style="width: 50%;display: flex;justify-content: center;" wx:for="{{vo.answers}}" wx:key="item">
                                                        <view class="weui-cell__hd">
                                                            <radio value="{{item.id}}" checked="{{item.checked}}" wx:if="{{options.sheetid}}" />
                                                            <radio value="{{item.id}}" wx:else />
                                                        </view>
                                                        <view class="weui-cell__bd">{{item.answerValue}}</view>
                                                    </label>
                                                </radio-group>

 <checkbox-group bindchange="checkboxChange" class="checkType" data-id="{{index}}" data-pId="{{vo.id}}" data-dictValueCode="{{vo.dictValueCode}}">
                            <label class="checkType-item" wx:for="{{vo.answers}}" wx:key="item" wx:for-index="index">
                                <view style="display: flex;height: 100rpx;line-height: 100rpx;">
                                    <checkbox value="{{item.id}}" checked="{{item.checked}}" style="color:#3A6AFA;" />
                                    <view class="weui-cell__bd">{{item.answerValue}}</view>
                                </view>
  </label>
                        </checkbox-group>