uniapp自定义radio、checkout样式

<view class="page-container">

		<view class="check-view">
			<checkbox-group>
				<label>
					<checkbox class="custom-checkbox" value="cb" checked="true" />选中
				</label>
				<label>
					<checkbox class="custom-checkbox" value="cb" />未选中
				</label>
			</checkbox-group>
		</view>


		<view class="radio-view">
			<radio-group>
				<label class="radio">
					<radio class="custom-radio" value="r1" checked="true" />选中
				</label>
				<label class="radio">
					<radio class="custom-radio" value="r2" />未选中
				</label>
			</radio-group>
		</view>
	</view>

官网文档的大小设置是通过采取用transform: scale(0.7);

我更倾向于使用字体大小去控制

vue2中 radio和checkbox 是使用before设置勾选图标

vue3中 radio和checkbox 是使用svg作为勾选图标

	.custom-checkbox {
		font-size: 64rpx;

		// 微信小程序
		.wx-checkbox-input{
			width: 1em;
			height: 1em;
			border-radius: 0;
			margin: 0;
		}
		// 选中
		&[checked] .wx-checkbox-input{
			background-color: #ED4743 !important;
			color: #ffffff !important;
			border-color: transparent;
		}
		.wx-checkbox-input.wx-checkbox-input-checked::before {
			font-size: 0.8em;
		}

		// h5
		::v-deep .uni-checkbox-input {
			width: 1em;
			height: 1em;
			border-radius: 8rpx;
			margin: 0;
			border-color: #d1d1d1;
		}

		// h5-vue2
		// 选中
		::v-deep .uni-checkbox-input-checked{
			background-color: #ED4743 !important;
			color: #ffffff !important;
			border-color: transparent;
		}
		::v-deep .uni-checkbox-input-checked::before {
			/* 如需自定义选中图标,通过背景图片设置 且设置 conteng: "" */
			// content: "";
			width: 80%;
			height: 80%;
			font-size: .8em !important;
			background: transparent;
			border-radius: 50%;
			// background: url(/static/logo.png) no-repeat center;
			background-size: 100%;
    }

		// h5-vue3
		// 选中
		.uni-checkbox-input:not(:empty){
			background-color: #FBDBE1 !important;
			border-color: transparent;
		}
		.uni-checkbox-input svg{
			width: 80%;
			height: 80%;
		}
		.uni-checkbox-input svg path{
			fill:   #C00226;
		}


	}


	.custom-radio{
		font-size: 64rpx;

		// 微信小程序
		.wx-radio-input {
			width: 1em;
			height: 1em;
			margin: 0;
		}
		// 选中
		&[checked] .wx-radio-input {
			background-color: #ED4743 !important;
			color: #ffffff !important;
			border-color: transparent;
		}

		.wx-radio-input.wx-radio-input-checked::before {
			font-size: 0.8em;
		}

		// h5
		::v-deep .uni-radio-input {
			width: 1em;
			height: 1em;
			border-radius: 50%;
			margin: 0;
			border-color: #d1d1d1;
		}

		// h5-vue2
		::v-deep .uni-radio-input.uni-radio-input-checked{
			background-color: #ED4743 !important;
			color: #ffffff !important;
			border-color: #ED4743 !important;
		}
		::v-deep .uni-radio-input-checked::before {
			/* 如需自定义选中图标,通过背景图片设置 且设置 conteng: "" */
			// content: "";
			width: 80%;
			height: 80%;
			font-size: .8em !important;
			background: transparent !important;
			border-radius: 50%;
			// background: url(/static/logo.png) no-repeat center;
			background-size: 100%;
    }

		// h5-vue3
		.uni-radio-input:not(:empty){
			background-color: #FBDBE1 !important;
			border-color: transparent;
		}
		.uni-radio-input svg{
			width: 80%;
			height: 80%;
		}
		.uni-radio-input svg path{
			fill:   #C00226;
		}
	}