小程序如何修改checkbox样式

1、首先我们新建一个小程序，目录如下图所示。

2、接着我们给页面声明个背景色，方便查看效果。

3、然后在页面中定义一个button，如下图所示。

4、可以看到左侧的button效果如下图所中拦示。

5、然后我们直接在button中重新填写要修改的丛拦默认样式即可覆盖，如下图所卖郑胡示。

6、可以看到页面的button样式被修改掉了。

小程序多选框

微信小程序为我们提供了checkbox-group，多项选择源哗器，内部由多个checkbox组成。

如何查看自定义样式：

打开微信小程序的官网，f12之后，查看相应的元素。

更多小程序demo，关散裂档注 苏苏的gitee ，持续更新！如有写冲乱的不尽完善的地方，望指正！

在微信小程序里面，有时候为了配闭雹轮合整个项目的风格，checkbox的样式会有些不同。

如何修改：

1. 修改checkbox样式

.wxml

<checkbox-group class='pull-left' bindchange="checkboxChange">

<label class="checkbox flex flex-vc ">轿信

<checkbox bindchange='checkboxChange' value="" checked="{{checkboxStatus}}" color='#fff'/>

<view>可用2000个积分币抵扣</view>

</label>

</checkbox-group>

.wxss

/* checkbox未肆贺选中时样式 */

checkbox .wx-checkbox-input{

border-radius: 3rpx

height: 26rpx

width: 26rpx

margin-top: -4rpx

/* 自定义样式.... */

}

/* checkbox选中时样式 */

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{

background-color: #e02e24

border: 1rpx solid #e02e24

/* 自定义样式.... */

}

---