微信小程序—checkbox样式修改（图文）

微信小程序—checkbox样式修改

效果图：

/*checkbox 整体大小  */
checkbox{
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  border: 10rpx solid #48b0b9;
  position: relative;
}
/*checkbox 选项框大小  */
 checkbox .wx-checkbox-input {
  width: 36rpx; // 选择框比checkbox整体要小
  height: 36rpx;
  border-radius: 50%; // 选择框系统是正方形，这里变成圆形
  position: absolute; // 位置有偏差所以通过定位来挪动位置
  top: 4rpx;
  left: 4rpx;
  border-color: transparent;  // 系统默认有边框，变成透明色就没有了
}
/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #48b0b9; // 选中的蓝色是蓝色
}
/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  color: transparent; // 选中后的图标默认是对号，这里吧对号变成透明颜色，就看不出来了
}