uniapp做微信小程序，自定义checkbox和radio的样式

用uniapp做个微信小程序，其中有用到自定义checkbox和radio的样式；代码记录如下：

自定义checkbox

在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;
	}

在代码中引用：

自定义radio样式：

如果要全局改变radio的样式，需要将样式代码写在App.vue中，代码如下：

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

代码中引用：

如果不在全局改变radio样式，只在单个文件中改变，则在使用radio的文件中加入如下代码：

    radio.info .wx-radio-input{
		border-color: #00000072;
		width: 16px;
		height: 16px;
	}
	::v-deep .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;
	}
	::v-deep .wx-radio-input.wx-radio-input-checked::before {
		display: none!important;
	}

效果：

自定义radio另外一种方法：

    
		1
		
		  
		      
		        
		      
		      单位
		    
		    
		      
		        
		      
		      个人
		    
		  
	

样式：

.radio-content {
	  height: 40rpx;
	  display: flex;
	  align-items: center;
	}
	.radio {
	  width: 24rpx;
	  height: 24rpx;
	  border-radius: 50%;
	  border: 2rpx solid #CCCCCC;
	  display: flex;
	  flex-direction: column; 
	  align-items: center;
	  justify-content: center;
	  margin: 0rpx 26rpx 0rpx 15rpx;
	}
	.radio-active{
	  width: 16rpx; 
	  height: 16rpx;
	  border-radius: 50%;
	  background-color: #0fbda6;
	}
	.radio-default{
	  border: 2rpx solid #0fbda6;
	}
	.radio-right {
	  margin-left: 66rpx;
	}

method

data() {
    return {
		radio1: 1
	}
},
methods: {
    changeRadio1() {
	    this.radio1 = 1;
	    console.log("单位")
    },
    changeRadio2() {
	    this.radio1 = 2;
	    console.log("个人")
    }, 
}