前言
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(' ') - 注意：如果设置背景图片的路径用的是本地的，就会报错并且显示不出来。
- 可选的解决方法：
- base64在线转换，转换后代码很长，不太美观。
- 使用网络图片，把图片放服务器上，然后引用。（用的这个，比较方便）
- 可选的解决方法：
- 有图片了就修改它的样式，需要做一下背景图片的自适应
/* 背景图片显示尺寸(放大/缩小背景图) */
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;
}