优化修改微信小程序原生单选（radio）复选（checkbox）框样式

现在的微信小程序是火的不要要的，很多公司都开始做微信小程序的产品项目，很多前端工程师都或主动或被动的一头扎向小程序开发大军，当然我也不可避免的开始加入其中。

不管是做什么样的项目，或多或少会涉及到表单，小程序提供了一系列的原生表单组件，其中很多组件是很不错的，我们直接拿来用就可以，但是单选和复选框的样式，实在是不在丑的不忍直视，当然和我们的设计小哥哥小姐姐做的设计图更是相差甚远，为了达到预期效果我们就必须要将原生组件进行优化，但是小程序的组件优化又不同于网页版，直接用我的另一篇博文《使用 CSS 修改 HTML 默认单选和复选框样式（网页版）》进行优化就可以。主要原因在于我们无法在调试模式下看到组件的原生样式代码，在这里我主要以复选框作为案例来记录我是如何进行修改的，废话不多说上代码。

小程序开发手册中给我们提供的原生复选框示例是这样的

WXML

<checkbox-group bindchange="checkboxChange">
	  <label class="checkbox" wx:for="{{items}}">
	    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
	  </label>
</checkbox-group>

JavaScript

Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  checkboxChange: function(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  }
})

最终效果：

在这里插入图片描述

其中并没有给到我们样式是怎么写的，我也是经过多番搜索查找才知道，小程序的复选框的类名是 wx-checkbox-input，但是他具体是怎么工作的，我也不想去深究了，我们只要达到我们优化的目的就可以了。

我这里进行优化的方法也很简单总共分为三步：

一、给原生复选框设置样式使其隐藏

WXSS

.wx-checkbox-input{
	display: none;
}

二、我们自己写一个复选框组件代码替换原生代码

WXML

<checkbox-group bindchange="checkboxChange">
	  <label class="checkbox" wx:for="{{items}}">
	  	<checkbox class="ws-checkbox" value="{{name}}" checked="{{checked}}"/>{{item.value}}
	  </label>
</checkbox-group>

三、给我们自己写的复选框组件设置我们想要的样式

WXSS

.ws-checkbox {
  display: inline-block;
  float: left;
  margin: 25rpx 20rpx 0 50rpx;
  width: 40rpx;
  height: 40rpx;
  background-image: url('https://xjl.jindanke.cn/uploads/wx_img/checked-box.png');
  background-size: 100%;
}

.ws-checkbox[checked] {
  background-image: url('https://xjl.jindanke.cn/uploads/wx_img/checked-box-hover.png');
}

最终效果：

在这里插入图片描述

至此，我们小程序的复选框优化就完成了，单选框和复选框的优化方式是一样的，这里就不再重复写了，如果在过程中有什么问题欢迎留言评论。