vant2把单选框和复选框自定义为按钮样式

单选效果.png

css样式

<style lang="less" scoped>
/deep/ .custom-radio-group,
.custom-checkbox-group {
    width: 100%;
    // 单选框，复选框文字样式
    .van-radio__label,
    .van-checkbox__label {
        text-align: center;
        margin-left: 0;
        height: 33px;
        line-height: 33px;
        background-color: #f6f8fa;
        width: 100%;
    }

    .van-radio,
    .van-checkbox {
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }

    // 去掉原本的勾选样式
    .van-radio__icon .van-icon,
    .van-checkbox__icon .van-icon {
        border: 0;
        display: none;
    }
    // 选中之后的文字颜色和背景色设置
    .van-radio__icon--checked + .van-radio__label,
    .van-checkbox__icon--checked + .van-checkbox__label {
        color: #617af0;
        background-color: #ecf0ff;
    }
}
</style>

使用

这个是单选框的使用方法，多选框把class改为class="custom-checkbox-group"就行了

<van-field name="radio" label="性别">
    <template #input>
        <van-radio-group
            class="custom-radio-group"
            v-model="formData.sex"
        >
            <van-row gutter="10">
                <van-col span="6">
                    <van-radio name="0">男 </van-radio>
                </van-col>
                <van-col span="6">
                    <van-radio name="1">女 </van-radio>
                </van-col>
            </van-row>
        </van-radio-group>
    </template>
</van-field>

角标效果

角标效果.png

<style lang="less" scoped>
/deep/ .custom-radio-group,
.custom-checkbox-group {
    width: 100%;
    // 单选框，复选框文字样式
    .van-radio__label,
    .van-checkbox__label {
        text-align: center;
        margin-left: 0;
        height: 33px;
        line-height: 33px;
        background-color: #f6f8fa;
        width: 100%;
    }

    .van-radio,
    .van-checkbox {
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }

    // 去掉原本的勾选样式
    .van-radio__icon .van-icon,
    .van-checkbox__icon .van-icon {
        border: 0;
        display: none;
    }
    // 选中之后的文字颜色和背景色设置
    .van-radio__icon--checked + .van-radio__label,
    .van-checkbox__icon--checked + .van-checkbox__label {
        color: #617af0;
        background-color: #ecf0ff;
    }
    .van-radio__icon--checked,.van-checkbox__icon--checked {
        .van-icon{
            display: block;
            position: absolute;
            right: -15px;
            bottom: -20px;
            width: 30px;
            height: 30px;
            border-radius: 0;
            -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
            background-color: #617af0;
        }
    }
    .van-icon-success:before{
        position: absolute;
        left: -1px;
        bottom: 9px;
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
        font-size: 10px;
    }
}
</style>