uni-app checkbox 修改样式

最新推荐文章于 2024-05-27 16:09:36 发布

蜜糖清蒸小鱼儿

最新推荐文章于 2024-05-27 16:09:36 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： uni-app

本文链接：https://blog.youkuaiyun.com/qq_28263801/article/details/110388736

uni-app 专栏收录该内容

1 篇文章

订阅专栏

这段代码展示了如何使用CSS设计一个检查协议的checkbox，包括未选中和选中时的样式。未选中时，checkbox有一个1rpx的边框；选中后，内部添加一个19rpx的绿色背景。此代码适用于前端UI的定制化需求。

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

在这里插入图片描述

.check-protocol uni-checkbox .uni-checkbox-input{
		width: 25rpx;
		height: 25rpx;
		border-radius: 0;
		border: 1rpx solid #C1C1C1;
	}
	/* 选中后的 背景样式  */
	.check-protocol uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{
		position: relative;
		border: 1rpx solid #C1C1C1;
		width: 25rpx;
		height: 25rpx;
	}
	/* 选中后的*/
	.check-protocol uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before{
		position: absolute;
		left: 50%;
		top: 50%;
		content: '';
		width: 19rpx!important;
		height: 19rpx!important;;
		background-color: #3AAF4A;
		transform: translate(-50%,-50%);
	}