uni-app checkbox 复选框自定义样式

認真的雪

于 2021-05-13 14:29:16 发布

阅读量1.9k

点赞数

分类专栏： uni-app

本文链接：https://blog.youkuaiyun.com/W_ang_Y_i/article/details/116747991

版权

uni-app 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在uni-app中通过CSS自定义复选框的样式，包括更改大小、背景颜色以及选中状态下的显示内容。

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

uni-app中更改复选框的默认样式

在 `app.vue` 中添加以下代码，

	/* #ifdef H5 */
	uni-checkbox .uni-checkbox-input {
	    width: 100px;
	    height: 50px;
	}
	uni-checkbox .uni-checkbox-input::before { 
		content: '你好';
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 22px;
		transform: translate(-50%, -50%) scale(1);
	}
	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background-color: #007AFF; 
		/* border: 1rpx solid #007AFF; */
	} 
	uni-checkbox-input-checked
	uni-checkbox .uni-checkbox-wrapper { width: 100px; }
	/*checkbox选中后图标样式  */
	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before{
		content: '你好' !important;
		color: #fff;
		font-size: 22px !important;
		transform: translate(-50%, -50%) scale(1);
	}
	/* #endif */