微信小程序checkbox樣式修改

打開小程序開發者工具的調試模式，查看元素的樣式，截圖如下

完全看不到小程序是如何設置Checkbox的樣式的，小程序實現Checkbox的樣式代碼對我們是黑盒的。
於是很多同學自己開始吭哧吭哧地編寫一個模擬的組件，創建一個template，編寫它的數據渲染和事件監聽處理，以及對用戶操作的數據進行實時更新，總之是自己要做一套類原生的工作。
本文要說的點就是，我們不用重寫一套Checkbox組件，我們還是在原生的Checkbox上進行表現的重置即可，其他的繼續沿用Checkbox本身的機制，工作量大大減少。
接下來是比較關鍵的一步

刷新小程序頁面，發現Checkbox不見了，說明我們的猜測是成立的，接下來就是去實現我們想要的Checkbox樣式啦

 

checkbox樣式修改

/*checkbox 整體大小  */
checkbox {
  width: 240rpx;
  height: 90rpx;
}
/*checkbox 選項框大小  */
checkbox .wx-checkbox-input {
  width: 50rpx;
  height: 50rpx;
}
/*checkbox選中后樣式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #FF525C;
}
/*checkbox選中后圖標樣式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  text-align: center;
  font-size: 22rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

 

 

 

 

 

 

 

.