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

最新推荐文章于 2024-05-27 16:09:36 发布

洪洪呀

最新推荐文章于 2024-05-27 16:09:36 发布

阅读量6.1k

点赞数 3

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

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

版权

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>