uniapp中radio样式改变

 

内容部分

<view>
                <!-- 示例radio -->
                <radio-group @change="radioChange" class="sunui-radio-group">
                    <label v-for="(item,index) in radio" :key="index" class="sunui-radio-label" :class="item.checked ? 'sunui-radio-checkd' : ''">
                        <radio :value="item.price" :checked="item.checked" />
                        <text>{{item.integral}}</text>
                    </label>
                </radio-group>
                <!-- 示例radio1 -->
                <radio-group @change="radioChange1" class="sunui-radio-group">
                    <label v-for="(item,index) in radio1" :key="index" class="sunui-radio-label" :class="item.checked ? 'sunui-radio-checkd' : ''">
                        {{item.checked}}
                        <radio :value="item.value" :checked="item.checked" />
                        <text>{{item.name}}</text>
                    </label>
                </radio-group>
                <!-- 示例checkbox -->
                <view class="sunui-checkbox-group">
                    <checkbox-group @change="checkboxChange" class="sunui-checkbox-group">
                        <label v-for="(item,index) in checkbox" :key="index" :class="item.checked ? 'sunui-checkbox-checkd' : ''" class="sunui-chekcbox-label">
                            <checkbox :value="item.value" :checked="item.checked" />
                            <text>{{item.name}}</text>
                        </label>
                    </checkbox-group>
                </view>

            </view>

样式

<style>
    /*
        这里修改成你需要的样式,譬如边框,背景颜色(Step.1)
    */
    .sunui-radio-label,
    .sunui-chekcbox-label {
        font-size: .7em;
        padding: 10upx 20upx;
        margin: 12upx;
        margin-left: 0;
        text-align: center;
        background-color: #eee;
        border-radius: 5upx;
        border: 1upx solid #FFBF40;
    }

    /*
        这里修改成你需要的样式,譬如激活边框以及背景颜色(Step.2)
     */
    .sunui-radio-checkd,
    .sunui-checkbox-checkd {
        color: #fff;
        background-color: #FFBF40;
    }

    .sunui-radio-group,
    .sunui-checkbox-group {
        display: flex;
        flex-wrap: wrap;
    }

    .sunui-radio-group radio,
    .sunui-checkbox-group checkbox {
        display: none;
    }
</style>