uniapp 中修改 uni-checkbox 默认样式

最新推荐文章于 2025-09-18 23:37:24 发布

原创最新推荐文章于 2025-09-18 23:37:24 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

uniapp 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何通过CSS自定义Uniapp中的Checkbox样式，包括不同平台（H5、微信小程序等）下的具体实现方法。

uniapp checkbox 默认样式是

我修改的样式是

在App.vue中加上就可以，最外层可是当前页面的最外层class
    .wrap {
		/* #ifdef H5 */
		uni-checkbox .uni-checkbox-input {
			border: none !important;
		}
		
		uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
			color: #FF6903;
		}
		
		.uni-checkbox-input.uni-checkbox-input-checked {
			border: none !important;
		}
		/* #endif */
		
		/* 微信中样式 */
		/* #ifdef APP-PLUS ||MP-WEIXIN */
		checkbox .wx-checkbox-input {
			border: none !important;
		}
		checkbox .wx-checkbox-input-disabled {
		    background: #fff !important;
		    border: none !important;
		}
		checkbox .wx-checkbox-input.wx-checkbox-input-checked {
			color: #FF6903;
		}
		.wx-checkbox-input.wx-checkbox-input-checked {
			border: none !important;
		}
		/* #endif */
	}