uniapp checkbox标签失效

最新推荐文章于 2025-07-08 16:55:12 发布

边中之城

最新推荐文章于 2025-07-08 16:55:12 发布

阅读量2.3k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_41886421/article/details/106578465

代码报错专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种在uniapp项目中解决Checkbox标签样式失效的方法。通过在App.vue中添加特定CSS代码，实现了Checkbox的正常显示及交互效果，包括未选中、选中状态的变化。

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

最近在做uniapp项目，在使用checkbox标签时发现标签效果失效，而官网的效果是好的，失效图如下所示

后来经过控制台样式对比发现，失效的代码未写样式，在使用uniapp创建项目时，未创建带有checkbox样式的项目，所以即使使用标签，也没有出现预期的效果。

鼠标点击变化

未选中
在这里插入图片描述
选中

解决方法：
在App.vue中添加以下代码：

uni-checkbox .uni-checkbox-input {
			border-radius: 3upx !important;
			color: #ffffff !important;
		}
		
		uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
			color: #fff;
			border-color: rgb(0, 122, 255);
			background: rgb(0, 122, 255);
		}
		uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:after {
			font-size: 18px;
		}

实现效果
在这里插入图片描述