微信小程序switch开关样式调整

最新推荐文章于 2025-02-24 17:48:27 发布

最新推荐文章于 2025-02-24 17:48:27 发布 · 2w 阅读

前端笔记专栏收录该内容

126 篇文章

订阅专栏

本文介绍了一种在微信小程序中自定义wxSwitch组件样式的wxss代码实现方式，通过直接修改wx-switch-input的选择器属性，可以轻松调整开关按钮的大小及颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面的代码复制粘贴进wxss中就管用，不用往wxml中加任何选择器

/*swtich样式-start*/
/*swtich整体大小*/
.wx-switch-input{
  width:82rpx !important;
  height:40rpx !important;
}
/*白色样式（false的样式）*/
.wx-switch-input::before{
  width:80rpx !important;
  height: 36rpx !important;
}
/*绿色样式（true的样式）*/
.wx-switch-input::after{
  width: 40rpx !important;
  height: 36rpx !important;
}
/*swtich样式end*/