如何修改uniapp的checkbox样式？

最新推荐文章于 2024-12-03 06:00:00 发布

super码王

最新推荐文章于 2024-12-03 06:00:00 发布

阅读量7.4k

点赞数 8

分类专栏： VsCode Vue 文章标签： vue.js uni-app

本文链接：https://blog.youkuaiyun.com/qq_41885673/article/details/119896950

版权

Vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

VsCode

11 篇文章

订阅专栏

这篇博客详细介绍了如何在Vue项目中编写CSS样式来实现圆角和红色主题的复选框。首先，通过选择器设置圆角边框，然后定义选中状态下的背景色和文字颜色。在实际使用时，只需将'round'和'red'类应用到checkbox组件上即可实现预期效果。示例代码展示了在`<checkbox-group>`内的应用，实现了记住我选项的复选框样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改步骤

第一步：编写css（注意：这个样式得写在 App.vue里）

//设置圆角
checkbox.round .wx-checkbox-input,
checkbox.round .uni-checkbox-input {
	border-radius: 100upx;
}

//设置背景色
checkbox.red[checked] .wx-checkbox-input,
checkbox.red.checked .uni-checkbox-input{
	background-color: #e54d42 !important;
	border-color: #e54d42 !important;
	color: #ffffff !important;
}

//元素使用的时候就是使用 round 和 red

第二步：使用

<view class="relative-bottom-20 margin">
        <checkbox-group class="block" @change="checkboxChange">
          <view class="flex-end form-group">
            <view class="title text-red" style="margin-right: 5rpx"
              >记住我</view
            >
            <checkbox
              style="transform: scale(0.5)"
              :checked="checkFlag"
              :value="true"
              class="round red"
            ></checkbox>
          </view>
        </checkbox-group>
      </view>