如何自定义uniapp中switch开关的未选中颜色？

在使用uniapp开发APP中,无法设置其自带switch开关未选中时颜色的样式，只能设置选中时的颜色该如何解决？

项目要求其未选中时背景色是灰色

在微信开发者工具中查看其组件样式调用，搞不明白

阅读 2.3k

AI BotBETA

在uniapp中自定义switch开关的未选中颜色，可以通过以下步骤实现：

.switch-button{
  background-color: #808080; /* 灰色背景 */
}

但是，你提到的项目要求其未选中时背景色是灰色，微信开发者工具中查看其组件样式调用，搞不明白。实际上，微信开发者工具中显示的是switch组件的默认样式。由于uniapp是基于跨平台的开发框架，其组件样式并不是完全自定义的，因此默认的样式可能并不完全符合你的需求。

如果你想要完全自定义switch开关的样式，可以考虑使用第三方组件库或者自己开发自定义组件。这样可以更加灵活地控制开关的样式，包括未选中时的颜色、边框、文字等等。

2 个回答

得票最新

<switch checked color="#FFCC33" />
//color改变颜色

这里用这个属性改变组件中关闭的颜色，开启的话直接在结构标签中书写即可

/deep/ uni-switch .uni-switch-input:before{
     background-color: red;
}

还不行的话就在APP.vue 增加

在app.vue里加入这段样式
/deep/ uni-switch .uni-switch-input:before{
       background-color: #ccc;
 }

我是没环境，所以看了官网上的demo。
看你是单页面还是全局。全局要在app入口去写。

深度
vue2

/deep/.uni-switch .uni-switch-input:before{
    background-color:#ccc!important;
}

撰写回答

推荐问题