复选框：
闲话少说，这里直接介绍如何修改小程序提供的复选框的样式，如原生的是这样的：
需要的是这样的：
示例代码：
/*复选框外框样式*/ checkbox .wx-checkbox-input { width: 40rpx; height: 40rpx; border: 4rpx solid #999; border-radius: 100%; }/*复选框外框选中样式*/ checkbox .wx-checkbox-input.wx-checkbox-input-checked { border-color: #3cbcee; }/*复选框选中后内部样式*/ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before { width: 60%; height: 60%; background: #3cbcee; border-radius: 100%; content: ''; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); }
注：复选框选中后内部样式部分，最后两行样式一定要有，不然复选框选中后内部的圆点会不居中（而且不太好调），具体的就不细说了，有兴趣的可以试试：
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);如上，还是跟我们修改html原生标签样式是一样的，只不过我们不了解小程序这些原生组件的内部结构罢了。
单选按钮：
仍旧按上面的样式修改，代码如下：
/* 单选按钮样式*/ radio .wx-radio-input { width: 40rpx; height: 40rpx; border: 4rpx solid #999; border-radius: 100%; background: none; }/*单选按钮选中后内部样式*/ radio .wx-radio-input.wx-radio-input-checked { border: 4rpx solid #3cbcee!important; } radio .wx-radio-input.wx-radio-input-checked::before { width: 60%; height: 60%; background: #3cbcee; border-radius: 100%; content: ''; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); }
如上，样式代码跟复选框的基本一致，直接将checkbox换为radio就可以了。但是有一个地方不一样，就是单选按钮选择后的外框样式需要添加 !Important ,不然不会生效的。
如果需要添加禁用标志，也是可以自定义的：
radio.disabled .wx-radio-input { width: 40rpx; height: 40rpx; border: 4rpx solid #eee; border-radius: 100%; background: none; }
总结：
虽然官方没有提供原生组件样式修改的入口，但是微信小程序基于微信内置浏览器的X5内核（其实就是Chrome内核），小程序在某些方面和html是很类似的。从上边的例子也可以看出，小程序原生checkbox组件内部是封装了一些我们看不到的东西的，只要我们了解了原生组件内部构造，就可以直接修改组件样式。
目前还没找到有关小程序组件内部类名的相关文档，但感觉可以从小程序编译包中应该有迹可循的，感兴趣的可以去了解下：https://www.cnblogs.com/xyyt/p/9523902.html
后记：
对于复选框、单选按钮这些组件，在编码实现的时候，会涉及到组件的选中、非选中、禁用状态，非禁用状态可能会有默认选择第一个选项，一般情况下的编码如下：
<radio wx:if="{{item.isSelect==0}}" class='vc {{cardDetail.status!=1||cardDetail.payStatus==0?"disabled":""}}' color="white" disabled='{{cardDetail.status!=1||cardDetail.payStatus==0}}' value="{{index}}" checked='{{index==fatherRightsCheckIndex}}' />
如上，所有的状态、属性都在一个组件中实现，可以发现判断条件会比较多，如果后续有改动，那么改动的地方就比较多了。我们可以对这段代码进行优化如下：
<block wx:if="{{item.isSelect==0}}"> <radio wx:if="{{cardDetail.status!=1||cardDetail.payStatus==0}}" class='vc disabled' disabled='true' /> <radio wx:else class='vc' color="white" value="{{index}}" checked='{{index==fatherRightsCheckIndex}}' /> </block>
如上，代码并没有增加多少，但是代码结构清晰多了，即使后续有改动，改动起来也很方便的。
