# CSS Styling Switch Color

**URL:** <https://community.glideapps.com/t/css-styling-switch-color/66158>\
**Category:** Ask for Help\
**Created:** [September 14, 2023, 4:49pm UTC](https://community.glideapps.com/t/css-styling-switch-color/66158 "2023-09-14T16:49:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Brandon](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/brandon/32/58098_2.png) [@Brandon](https://community.glideapps.com/u/Brandon)\
**Post date:** [September 14, 2023, 4:49pm UTC](https://community.glideapps.com/t/css-styling-switch-color/66158/1 "2023-09-14T16:49:17Z")

</div>

Anyone know the css to change the color of a switch?  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/7/7752b725d63152fa6dde570ff42504e943107819.png)

I’m on the business plan.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [September 15, 2023, 1:31pm UTC](https://community.glideapps.com/t/css-styling-switch-color/66158/3 "2023-09-15T13:31:44Z")

</div>

The above answer is not entirely accurate. You should use this code (note, that it will change the color of all switch components in the app).

```auto
.switch-checked .track {
   background-color: red !important;
}

```

If you only want to change the switch color of one switch, you’ll need to:

1. first add it to a container (because for whatever reason, the switch component doesn’t have a CSS box)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/e/2e44770e441457a6fc7b34f7457080139ebbcfca.png)

2. add a css class to the container (eg. `red-switch-box`)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/4/a46922fe2e494b2a91db76d7d7a593feffe25c6e.png)

3. edit the above CSS to include the container class like this:

```auto
[class*="red-switch-box"] .switch-checked .track {
    background-color: red !important;
}

```

End result:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/9/d9e51e2b04c9d16cf73e8ffc9fbc2eb390611402.png)

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [September 22, 2023, 1:32pm UTC](https://community.glideapps.com/t/css-styling-switch-color/66158/4 "2023-09-22T13:32:11Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.