修改开关选择器switch的样式

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

20191220132514201.png

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

1.一个开关

checked=”true” 为选中状态 

  1. <switch name="switch" checked="true" />

默认样式如图

20191220131225181.png

2.修改选中状态样式

  1. .wx-switch-input {
  2.   width: 70rpx !important;
  3.   height: 40rpx !important;
  4.   background: #97c9c6 !important;
  5.   border: 0rpx solid #97c9c6 !important;
  6. }

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

20191220131831627.png 20191220131852236.png

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

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

如图：

20191220132200543.png

4.关闭状态的样式

  1. .wx-switch-input::before {
  2.   width: 70rpx !important;
  3.   height: 40rpx !important;
  4.   background: #ddd !important;
  5.   border: 0rpx solid #ddd !important;
  6. }

效果如图：

2019122013235057.png 20191220132356318.png

发表评论

表情：
评论列表 （有 0 条评论，506人围观）

还没有评论，来说两句吧...

相关阅读