uni-app 把checkbox修改样式为圆形

最新推荐文章于 2025-02-19 09:08:51 发布

洪洪呀

最新推荐文章于 2025-02-19 09:08:51 发布

阅读量8.1k

点赞数 4

文章标签： uni-app vue.js 前端

本文链接：https://blog.csdn.net/H_hongai/article/details/127381515

版权

这篇博客介绍了如何在uni-app项目中，通过修改app.vue文件，将checkbox组件的样式改为圆形，并展示关键代码和使用示例。适合想要定制uni-app UI设计的开发者。

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

uni-app checkbox 复选框改为圆形样式

1. 效果图

在这里插入图片描述

2.关键代码

uni-app项目一定要在 app.vue 页面修改才会生效

	uni-checkbox .uni-checkbox-input {
		border-radius: 80rpx !important;
	}

	uni-checkbox.checked .uni-checkbox-input {
		background-color: #347CED !important;
		border-color: #347CED !important;
	}

3. 页面使用

<view class="text-center">
	<label class="padding-right-xs">
		<checkbox-group @change="checkboxChange">
			<checkbox :class="state?'checked':' '" class="blue size" :checked="state" />
			<text class="text-gray" style="vertical-align: middle;">
				同意<text class="text-blue">《老人、儿童托管事宜须知》</text>并遵守
			</text>
		</checkbox-group>
	</label>
</view>