微信小程序 radio 样式修改

概述：

微信小程序不支持 input type=“radio”，仅支持自己的API <radio>,但是默认样式总是不能完全满足我们的开发应用

开发：

这是微信的默认样式  绿色背景  白色对钩

这是我们所需样式

直接上代码：

<radio-group @change="radioChange">
		<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in sexlist" :key="item.value">
		    <view>
				<radio class="radio" :value="item.value" :checked="index === current" />
			</view>
			<view>{{item.name}}</view>
		</label>
</radio-group>

sexlist: [{
			value: 1,
			name: '男'
		},
		{
			value: 2,
			name: '女'
		}
		],
currentSex: 0

//css样式：
隐藏背景颜色
/deep/radio .wx-radio-input {
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
		border: 4rpx solid #8C8C8C;
		/* 外圈边框，默认灰色，即未选中状态*/

	}



	/deep/radio .wx-radio-input.wx-radio-input-checked {
		
		border: 4rpx solid #FFE420 !important;
		background-color: white !important;
	}
	/* 隐藏选择后的打勾 */
	/deep/radio .wx-radio-input.wx-radio-input-checked::before {
		width: 60%;
		height: 60%;
		background: #FFE420;
		/* 内圈实心圆选中状态颜色*/
		border-radius: 50%;
		content: '';
		/* 隐藏*/
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);

	}

最后就是这样子啦