uni-app 单选框复选框样式修改

发布于 1周前 作者 itying888 来自 Uni-App

uni-app 单选框复选框样式修改

2 回复

有具体的需求嘛


在uni-app中,你可以通过自定义样式来修改单选框和复选框的外观。通常,这涉及到修改组件的类名和样式定义。以下是一个示例,展示如何通过CSS和自定义组件来实现这一目的。

修改默认样式

首先,你可以在App.vue或者页面的<style>标签中定义自定义样式。例如:

<style>
/* 单选框样式 */
.custom-radio .uni-radio__inner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background-color: #fff;
}

.custom-radio .uni-radio__inner::after {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #409EFF;
    top: 3px;
    left: 3px;
}

/* 复选框样式 */
.custom-checkbox .uni-checkbox__input {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    background-color: #fff;
}

.custom-checkbox .uni-checkbox__input::before {
    content: '\2713';
    color: #409EFF;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
}

.custom-checkbox .uni-checkbox__input.uni-checkbox__input--checked::before {
    display: block;
}
</style>

使用自定义样式

然后,在你的页面中使用这些自定义样式。例如:

<template>
    <view>
        <!-- 单选框 -->
        <radio-group>
            <label class="custom-radio" v-for="(item, index) in radioList" :key="index">
                <radio :value="item.value">{{ item.label }}</radio>
            </label>
        </radio-group>

        <!-- 复选框 -->
        <checkbox-group>
            <label class="custom-checkbox" v-for="(item, index) in checkboxList" :key="index">
                <checkbox :value="item.value">{{ item.label }}</checkbox>
            </label>
        </checkbox-group>
    </view>
</template>

<script>
export default {
    data() {
        return {
            radioList: [
                { value: '1', label: '选项1' },
                { value: '2', label: '选项2' }
            ],
            checkboxList: [
                { value: 'a', label: '选项A' },
                { value: 'b', label: '选项B' }
            ]
        };
    }
};
</script>

在这个示例中,我们通过给label元素添加custom-radiocustom-checkbox类名,并在CSS中定义这些类的样式,来自定义单选框和复选框的外观。你可以根据需要进一步调整这些样式,比如改变颜色、大小或者添加其他装饰元素。

回到顶部