[uniapp checkbox] modify the style of the uniapp checkbox check box

Hello, everyone ~ I'm Ma Xiaotiao . An advanced program yuan .

Record every progress of your growth here , Hope to meet like-minded ape friends

Work together , Put technology together up up up！！！

1. stay APP.vue Write in style

Use uniapp Self contained checkbox when , The modified style must be in APP.vue Revision in China ：

<style lang="scss"> // Customize checkbox The style of （  The class name is used when the element is used ：mycheck） checkbox.mycheck .wx-checkbox-input, checkbox.mycheck .uni-checkbox-input {
    
		width: 30rpx !important;
		height: 30rpx !important;
		background-color: #eeeeee !important;
		border-radius: 5px !important;
		border: solid 1px #cccccc !important;
	}
	
	
	//  Selected   Check style  checkbox.mycheck .uni-checkbox-input-checked::before, checkbox.mycheck .wx-checkbox-input-checked::before{
    
		// width: 25rpx !important; //  Check the size of the tick when it is selected , Don't exceed the size of the background  
		// height: 25rpx !important; //  Check the size of the tick when it is selected , Don't exceed the size of the background  
		font-size: 36rpx !important; //  Check size  30rpx /
	}


</style>

2. Add a custom class name to the page tag

The class name I use here is mycheck, Just add it to the label .

<checkbox :checked="agree_check" color="#3889fd" @click="checkboxChange" class="mycheck" />

ending~