微信小程序—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; // 选中后的图标默认是对号,这里吧对号变成透明颜色,就看不出来了
}