前言

checkbox很好使，使用中往往需要改变它的样式。
记录一下用自定义的图片代替原有样式的过程。
关于把checkbox从：变成的过程

正文

思路

问题拆分：
①如何修改checkbox的样式
②如何使用图片代替原有样式

如何修改checkbox的样式

修改下面的几个选项即可

1、未选中的背景样式：.wx-checkbox-input
2、选中后的背景样式 ： .wx-checkbox-input.wx-checkbox-input-checked
3、选中后的图标的样式：.wx-checkbox-input.wx-checkbox-input-checked::before

• 可以改变宽高、字体大小之类的;
• 选中后图标的样式可以设置 content=" ";
• 使用的时候，如果直接写 checkbox wx-checkbox-input，修改的就是单页全部的checkbox。
• 如果仅针对某部分的checkbox，就在其上使用自定义类名，如 class:“my-checkbox”，再针对性修改。

乱入的尝试一：关于使用css绘制空心和实心三角的方法

但是用到了伪类，再叠加修改checkbox样式的话，显得有些复杂，所以放弃。

如何使用图片代替原有样式

• 使用属性：background:url(' ')
• 注意：如果设置背景图片的路径用的是本地的，就会报错并且显示不出来。
  • 可选的解决方法：
    1. base64在线转换，转换后代码很长，不太美观。
    2. 使用网络图片，把图片放服务器上，然后引用。（用的这个，比较方便）
• 有图片了就修改它的样式，需要做一下背景图片的自适应

 /* 背景图片显示尺寸(放大/缩小背景图) */background-size: 50rpx 50rpx;  /* 通过像素设置 */background-size: 50% 50%;    /* 通过百分比设置 */background-size: cover;      /* 覆盖:图片成比例填满盒子。可用于适配 */background-size: contain;     /* 包含:图片成比例放大,可能不会填满盒子。可用于适配  */

完成！

代码

  <checkbox class="edit-checkbox"/>

.edit-checkbox {width: 30rpx;height: 30rpx;
}/*checkbox未选中时样式 */
.edit-checkbox .wx-checkbox-input {/* 自定义样式.... *//* background-color: transparent; *//* border: none; */background: url('https:xxx.png')no-repeat center;/* background-size: 200px 200px; *//* 通过像素设置 */background-size: 50% 50%;/* 通过百分比设置 */background-size: cover;/* 覆盖:图片成比例填满盒子。可用于适配 */background-size: contain;/* 包含:图片成比例放大,可能不会填满盒子。可用于适配  */border: none;width: 40rpx;height: 40rpx;
}/*checkbox选中后样式  */
.edit-checkbox .wx-checkbox-input.wx-checkbox-input-checked {border: none;background-color: transparent;background: url('https:xxx.png')no-repeat center;/* background-size: 200px 200px; *//* 通过像素设置 */background-size: 50% 50%;/* 通过百分比设置 */background-size: cover;/* 覆盖:图片成比例填满盒子。可用于适配 */background-size: contain;/* 包含:图片成比例放大,可能不会填满盒子。可用于适配  */border: none;width: 40rpx;height: 40rpx;
}/*checkbox选中后图标样式  */
.edit-checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {/* 去除对号 *//* content: '×'; *//* background: #fff; *//* width: 36rpx;height: 36rpx;border-radius: 50%;color: red; */display: none;
}

扩展

• 注意：组件里面修改不了checkbox的默认样式，可以在使用该组件的页面进行样式修改 参考
  -checkbox的disabled样式

 .wx-checkbox-input.wx-checkbox-input-disabled {border: none;background: #f3b19a;
}

参考

• 微信小程序如何修改radio和checkbox的默认样式和图标
• 微信小程序 本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用image标签。
• 微信小程序设置背景图片不显示问题解决方法
• CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)