# CSS Class for a Switch **URL:** \ **Category:** Ask for Help\ **Created:** [February 20, 2025, 3:04pm UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198 "2025-02-20T15:04:29Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![MattGlides](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@MattGlides](https://community.glideapps.com/u/MattGlides)\ **Post date:** [February 20, 2025, 3:04pm UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/1 "2025-02-20T15:04:29Z")
Currently using compiled CSS, tried this however it does not seem to be working? The switch is inside the container ![Screenshot 2025-02-20 170257](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/d/3dd55d1ec5c00869a64d415ee012954cd2c1202d.png) ![Screenshot 2025-02-20 170242](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/f/ffb1239a0449692b398939009f9138603216f075.png) ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [February 20, 2025, 3:13pm UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/2 "2025-02-20T15:13:24Z")
![CleanShot 2025-02-20 at 22.13.11@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/f/efa08688af677d259b7d635ea53d94c26f749748.png) Please try this instead and let us know if it works. ---
**Author:** ![MattGlides](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@MattGlides](https://community.glideapps.com/u/MattGlides)\ **Post date:** [February 20, 2025, 3:55pm UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/3 "2025-02-20T15:55:45Z")
I do not see that option, only the first ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [February 20, 2025, 4:06pm UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/4 "2025-02-20T16:06:02Z")
Did you turn compiled CSS off first? ---
**Author:** ![MattGlides](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@MattGlides](https://community.glideapps.com/u/MattGlides)\ **Post date:** [February 20, 2025, 4:10pm UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/5 "2025-02-20T16:10:31Z")
Okay just did it, it still didn’t work and it actually broke our floating CSS button that we already have in if I turn the compile CSS off. Is there maybe a problem with my CSS code? Just need the switch to be red to stand out more is all. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [February 20, 2025, 11:56pm UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/6 "2025-02-20T23:56:02Z")
It’s weird that a piece of code broke because compiled CSS is off. Can you show us your full code? ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [February 21, 2025, 4:24am UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/7 "2025-02-21T04:24:57Z")
> [@MattGlides](#): > > it actually broke our floating CSS button that we already have in if I turn the compile CSS off. This can happen due to an inappropriate selector choice. A possible solution is to prepend #page-root to the current selector to strengthen its specificity. ---
**Author:** ![MattGlides](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@MattGlides](https://community.glideapps.com/u/MattGlides)\ **Post date:** [February 21, 2025, 10:46am UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/8 "2025-02-21T10:46:07Z")
button[data-testid=“menu-left-button”] { display: none; } .comment { margin: 0px; padding: 0px; background-color: none; top: 80%; /\* Moved much further down \*/ left: 75%; width: 80px; height: 50px; position: -webkit-sticky; position: sticky; z-index: 999; margin-top: -70px; } .comment button div { width: 120px; /\* Slightly wider \*/ height: 30px; } .comment svg { padding-left: 10px; width: 85px; /\* Adjusted to match button div size _/ height: 60px; fill: white; /_ Set the SVG color to white \*/ } .comment button { background-color: white; /\* Navy background _/ width: 120px; /_ Made wider \*/ } .test { margin: 0px; padding: 0px; background-color: none; top: 0; /\* Position the button at the top _/ left: 0; /_ Move the button to the left side \*/ width: 80px; height: 50px; position: -webkit-sticky; position: sticky; z-index: 999; } .test button div { width: 100px; /\* Slightly wider \*/ height: 30px; } .test svg { padding-left: 10px; width: 75px; /\* Adjusted to match button div size _/ height: 40px; fill: white; /_ Set the SVG color to white \*/ } .test button { background-color: black; /\* Black background _/ width: 120px; /_ Made wider \*/ } .jobs-history div[class\*=“select-mode-container\_\_\_StyledDiv2”] { display: -webkit-flex; display: -ms-flexbox; display: flex; } .jobs-history div[class\*=“pages-component-renderer\_\_\_StyledDiv3”] { -webkit-order: 1; -ms-order: 1; order: 1; padding-bottom: 20px; } .jobs-history div[class\*=“wire-list-container\_\_\_StyledDiv13”] { -webkit-order: 2; -ms-order: 2; order: 2; } [class\*=“red-switch-box”] .switch-checked .track { background-color: red !important; } the last class section is the only one thats not working in the app btw ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [February 21, 2025, 11:03am UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/9 "2025-02-21T11:03:57Z")
Is this code your own creation or was it given to you by someone else? I find the use of class names with asterisks quite unusual. ---
**Author:** ![MattGlides](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@MattGlides](https://community.glideapps.com/u/MattGlides)\ **Post date:** [February 21, 2025, 11:34am UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/10 "2025-02-21T11:34:59Z")
Given by someone else, I don’t have much knowledge on CSS. Most of these I copied from community/chat gpt ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [February 21, 2025, 11:37am UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/11 "2025-02-21T11:37:20Z")
Try using this code. I can’t test it myself, but it seems like it should work: ```auto #page-root .red-switch .peer:checked ~ div { background-color: red; } ``` ---
**Author:** ![MattGlides](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@MattGlides](https://community.glideapps.com/u/MattGlides)\ **Post date:** [February 21, 2025, 11:49am UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/12 "2025-02-21T11:49:09Z")
Didn’t have any effect either unfortunately, also to note we have a floating support button in the bottom right for our app similiar to the one Glide have in their builder. When I turn compiled CSS off, that button turns black and ceases to float. When I then turn the preview on, the button disappears completely AND the switch doesn’t turn red during any of it ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [February 21, 2025, 11:50am UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/13 "2025-02-21T11:50:42Z")
> [@ThinhDinh](#): > > ![CleanShot 2025-02-20 at 22.13.11@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/f/efa08688af677d259b7d635ea53d94c26f749748.png) Did you apply this setting and assign the class name “red-switch” below your switch component? If the switch does not support class naming, it is best to wrap it in a container and assign the class name to the container instead. ---
**Author:** ![MattGlides](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@MattGlides](https://community.glideapps.com/u/MattGlides)\ **Post date:** [February 21, 2025, 11:51am UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/14 "2025-02-21T11:51:16Z")
I just edited my previous comment with the update of doing that ---
**Author:** ![MattGlides](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@MattGlides](https://community.glideapps.com/u/MattGlides)\ **Post date:** [February 21, 2025, 11:57am UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/15 "2025-02-21T11:57:55Z")
![Screenshot 2025-02-21 135740](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/f/8fa7e53399f4e7cd557aeabf16185020f7939301.png) Like so? ---
**Author:** ![MattGlides](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@MattGlides](https://community.glideapps.com/u/MattGlides)\ **Post date:** [February 21, 2025, 11:59am UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/16 "2025-02-21T11:59:20Z")
Those settings now work but our floating support button completely disappears ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [February 21, 2025, 12:04pm UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/17 "2025-02-21T12:04:48Z")
One of the differences between enabling and disabling the compiled CSS button is that when enabled, `#page-root` is automatically added to all your selectors. If you already have `#page-root`, enabling the button will result in duplication. On the other hand, if a selector is incorrectly named (not intended for a specific style), it may end up lower in the hierarchy and fail to appear due to being overridden by stronger existing styles. My suggestion is to keep the setting with the button turned off. If your code is not working, simply add `#page-root` in front of the selector. This achieves the same effect as enabling the button. ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [February 21, 2025, 1:25pm UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/18 "2025-02-21T13:25:41Z")
You are in the wrong space: [https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/33?u=himaladin](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/33) It works if you want to apply it to all switch components in the app. Just remove the class name inside the selector so it becomes: `#page-root .peer:checked ~ div` ---
**Author:** ![MattGlides](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@MattGlides](https://community.glideapps.com/u/MattGlides)\ **Post date:** [February 21, 2025, 1:44pm UTC](https://community.glideapps.com/t/css-class-for-a-switch/80198/19 "2025-02-21T13:44:13Z")
Thank you so much