微信小程序開發——修改小程序原生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>

如上，代碼並沒有增加多少，但是代碼結構清晰多了，即使后續有改動，改動起來也很方便的。