修改开关选择器switch的样式

爱被打了一巴掌 2021-07-24 19:00 447阅读 0赞

![20191220132514201.png][]

微信小程序官方文档：[https://developers.weixin.qq.com/miniprogram/dev/component/switch.html][https_developers.weixin.qq.com_miniprogram_dev_component_switch.html]

1.一个开关

checked="true"  为选中状态

默认样式如图

![20191220131225181.png][]

2.修改选中状态样式

.wx-switch-input {
      width: 70rpx !important;
      height: 40rpx !important;
      background: #97c9c6 !important;
      border: 0rpx solid #97c9c6 !important;
    }

选中状态下的样式如图                                                    点击关闭之后的样式

![20191220131831627.png][]                                                  ![20191220131852236.png][]

3. 修改选中状态下小圆点的样式

.wx-switch-input::after {
      width: 40rpx !important;
      height: 40rpx !important;
    }

如图：

![20191220132200543.png][]

4.关闭状态的样式

.wx-switch-input::before {
      width: 70rpx !important;
      height: 40rpx !important;
      background: #ddd !important;
      border: 0rpx solid #ddd !important;
    }

效果如图：

![2019122013235057.png][]    ![20191220132356318.png][]

[20191220132514201.png]: /images/20210724/8e0899fc76504275862b9173c9b487a6.png
[https_developers.weixin.qq.com_miniprogram_dev_component_switch.html]: https://developers.weixin.qq.com/miniprogram/dev/component/switch.html
[20191220131225181.png]: /images/20210724/fed6d66e479249dfa40ffeb53de037c0.png
[20191220131831627.png]: https://img-blog.csdnimg.cn/20191220131831627.png
[20191220131852236.png]: /images/20210724/48e83f0ac3c443aaab71abfedd65967f.png
[20191220132200543.png]: /images/20210724/aefdd753f3ee494da9e3b9194123ecd2.png
[2019122013235057.png]: https://img-blog.csdnimg.cn/2019122013235057.png
[20191220132356318.png]: /images/20210724/538dd45bca1447d1a652598234059ea2.png