微信小程序开发——修改小程序原生checkbox、radio默认样式

复选框：

闲话少说，这里直接介绍如何修改小程序提供的复选框的样式，如原生的是这样的：

需要的是这样的：

示例代码：

/*复选框外框样式*/
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>

如上，代码并没有增加多少，但是代码结构清晰多了，即使后续有改动，改动起来也很方便的。