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

Question

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

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

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

Answer 1

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

深度
vue2

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

Answer 2

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

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

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

官方文档： https://uniapp.dcloud.net.cn/component/switch.html#switch

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

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

Answer 3

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

1. 在你的页面中，找到switch组件的引用。
2. 在该引用上设置自定义样式，例如：

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

3. 重新编译并查看效果。

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

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