uni-app develops WeChat applet and solves the problem of style setting of native components such as checkbox and radio

They arenative components, and the styles can only be modified inapp.vue Modify it in . Currently we only know this solution. If the pictures in your UI are special and difficult to write in CSS, it is recommended to use pictures instead. Please see the example below.

Correct settings ✔: Set in the App.vue file

test.vue file (assuming you use checkbox or radio components):

<template>
    <viewclass="custom-checkbox">
      	<checkbox-group>
	  <checkbox>
	    checkbox
	  </checkbox>
	</checkbox-group></view>
</template>

App.vue file (set here):

Tip: There is no need to introduce styles, global setting refresh takes effect directly. Custom-checkbox is used to wrap your components. As long as you use direct wrapping, the styles will take effect globally.

<style lang="scss">
.custom-checkbox {  // 使用一层类名包裹避免全局污染，下面开始设置选中前的你要样式//设置通用样式 
	.universal_sty {
		border: none;
		width: 42rpx;
		height: 39rpx;
		background-color: transparent;
		background-repeat: no-repeat;
		background-size: 100%;
	}
 
	//选中前的样式----------------------------------
	checkbox .wx-checkbox-input {
		background-image: url('./static/choice_no.png'); //替换为你要的图片样式
		@extend .universal_sty;
	}
 
	//选中前原本的图标样式-需要把它置空
	checkbox .wx-checkbox-input::before {
		font-size: 0rpx;
		background: transparent;
	}
 
	//选中后的样式---------------------------------
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background-image: url('./static/choice_much.png'); //替换为你要的图片样式
		@extend .universal_sty;
	}
 
	//选中后的图标样式，需要把它置空
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		font-size: 0rpx;
		background: transparent;
	}
}
 
</style>

Custom checkbox

Write styles in App.vue:

    checkbox.red .wx-checkbox-input,
	checkbox.red .uni-checkbox-input {
	    background-image: url('/static/images/steps/drug_nosel.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border-color: #00000000;
		width: 16px;
		height: 16px;
	}
	
	checkbox.red[checked] .wx-checkbox-input,
	checkbox.red.checked .uni-checkbox-input{
		background-image: url('/static/images/steps/checkbox_checked.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #00000000;
		border-color: #00000000;
		width: 16px;
		height: 16px;
	}

Custom radio style:

If you want to change the radio style globally, you need to write the style code in App.vue. The code is as follows:

/* radio 未选中时的样式 */
	radio.info .wx-radio-input{
		border-color: #00000072;
		background-repeat: no-repeat;
		width: 16px;
		height: 16px;
		background-clip: content-box!important;
		box-sizing: border-box;
	}
	/* radio 选中后的样式 */
	radio.info .wx-radio-input.wx-radio-input-checked{
		background-image: url('/static/images/steps/checkbox_checked.png');
		background-color: #00000000!important;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 16px;
		height: 16px;
		border-color: #00000000!important;
		background-clip: content-box!important;
		box-sizing: content-box;
	}
	
	/* radio 选中后的图标样式*/
	radio.info .wx-radio-input.wx-radio-input-checked::before{
		display: none!important;
	}