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

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

認真的雪

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

阅读量1.8k

点赞数

分类专栏： uni-app

本文链接：https://blog.csdn.net/W_ang_Y_i/article/details/116747991

版权

uni-app 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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 */