uniapp的radio、checkout大小设置，解决办法，以及radio、checkout的背景等样式修改。

一、radio、checkout修改大小

        官网文档有写 建议大小设置采取用transform: scale(0.7); 这种方式去设置；

二、修改样式 首先看一下radio官网默认的样式：

实际开发过程中的需求不太一样的，看下需求样式。

话不多说，上代码！

拿官网举例

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

在组件中使用：

//选中之后的样式
::v-deep .wx-radio-input.wx-radio-input-checked {
	background-color: rgba(23, 194, 194) !important;
	border-color: rgba(23, 194, 194) !important;
	background-clip: content-box !important;
	padding: 6rpx !important;
	box-sizing: border-box;
	border-radius: 50%;
}

//未选中样式
::v-deep .wx-radio-input {
    padding: 6rpx !important;
	box-sizing: border-box;
	border-radius: 50%;
	background-color: white !important;
	border-color: rgba(204, 208, 214) !important;
}

//去除默认对号
::v-deep .wx-radio-input::before{
		display: none!important;
}
 

可在App.vue中更改或在页面中，页面中需使用/deep/ !建议大家在该组件中进行使用，否则会造成样式的冲突！

 /* radio 选中后的样式 */
uni-radio .uni-radio-input.uni-radio-input-checked{
	background-color: #248067!important;
	border-color: #248067!important;
	background-clip: content-box!important;
	padding: 6rpx!important;
	box-sizing: border-box;
}
	
/* radio 选中后的图标样式*/
 uni-radio .uni-radio-input.uni-radio-input-checked::before{
	display: none!important;
}
 

三、checkout修改样式，首先看一下官网默认的样式：

碰到需求是这样子的,因为这个是需要和checkout的效果一致，点击勾选，再次点击取消勾选。

其实它和radio设置是类似的，只不过改一下类名即可：

上代码：

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

在组件中使用：

::v-deep checkbox .wx-checkbox-input {
	padding: 6rpx !important;
	box-sizing: border-box;
	border-radius: 50%;
}

::v-deep checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	background-color: $color-primary !important;
	border-color: $color-primary !important;
	background-clip: content-box !important;
	padding: 6rpx !important;
	box-sizing: border-box;
	border-radius: 50%;
}

::v-deep checkbox .wx-checkbox-input::before {
	display: none !important;
}

最后是可以实现的，希望对大家有所帮助！