uni-app 修改复选框checbox样式

最新推荐文章于 2024-08-14 10:04:35 发布

TWL1203

最新推荐文章于 2024-08-14 10:04:35 发布

阅读量1.9k

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/TWL1203/article/details/126263488

版权

1. 组件
注意：color=“#fff” 是设置选中对勾的颜色

<checkbox-group class="group" @change="checkChange">
	<label class="list" v-for="(item, index) in fileList" :key="index">
		<view class="name">{{ item.path }}</view>
		<checkbox :value="item.path" class="checkbox" color="#fff"/>
	</label>
</checkbox-group>

原本样式如下：

在这里插入图片描述

2. App.vue
需要把修改样式写到App.vue里，写在组件内无效

checkbox .wx-checkbox-input,
checkbox .uni-checkbox-input { // 复选框样式
	width: 22rpx;
	height: 22rpx;
	border-radius: 2rpx;
	background-color: #008CFF;
	border-color: #008CFF ;
	
	svg { // 选中对勾宽高
		width: 28rpx;
		height: 28rpx;
	}
}