# How to apply css code to all switches component?

**URL:** <https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535>\
**Category:** Ask for Help\
**Created:** [June 26, 2022, 11:03am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535 "2022-06-26T11:03:11Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![antoniedik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antoniedik/32/44061_2.png) [@antoniedik](https://community.glideapps.com/u/antoniedik)\
**Post date:** [June 26, 2022, 11:03am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/1 "2022-06-26T11:03:12Z")

</div>

I have modified the css for the switch component, so that it has an ios-like style when opened on android.

but how to make it automatically applied to all switch components?  
because now I can only implement by including the name of the switch component.

this is element switch only for “Status Flash Sale”

button#switch-Status\ Flash\ Sale{

 ![photo_2022-06-26_17-39-28](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/2/f27baaac25c910a6dc3d3d2e94e083708fcb2a73.jpeg)  
}

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [June 26, 2022, 11:19am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/2 "2022-06-26T11:19:14Z")

</div>

Try using this instead:

```auto
<pre><span><style>
[data-test="app-switch-view"] {
  /* Your CSS goes here
}

```

That’s the generic class name for all switch components. You would need to apply the CSS on every details screen where it’s needed.

---

<div class="post-metadata">

**Author:** ![antoniedik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antoniedik/32/44061_2.png) [@antoniedik](https://community.glideapps.com/u/antoniedik)\
**Post date:** [June 26, 2022, 11:21am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/3 "2022-06-26T11:21:58Z")

</div>

I’ve tried it and it still doesn’t work

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [June 26, 2022, 11:27am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/4 "2022-06-26T11:27:04Z")

</div>

Can you share the CSS that you’re using?

(I’m no CSS guru, but if you share what you have then somebody else may be able to help).

---

<div class="post-metadata">

**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:** [June 27, 2022, 12:31am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/5 "2022-06-27T00:31:56Z")

</div>

Darren’s method should work as long as the CSS is correct, since this is a component that has a stable name. I would like to view the snippet code being used here to see if there’s something we’re missing.

---

<div class="post-metadata">

**Author:** ![antoniedik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antoniedik/32/44061_2.png) [@antoniedik](https://community.glideapps.com/u/antoniedik)\
**Post date:** [June 27, 2022, 1:04am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/6 "2022-06-27T01:04:47Z")

</div>

```auto
button#switch-Status\ Flash\ Sale{
    position: relative;
    margin-left: 8px;
    flex-shrink: 0;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 52px;
    height: 21px;
}

```

---

<div class="post-metadata">

**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:** [June 27, 2022, 1:07am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/7 "2022-06-27T01:07:07Z")

</div>

> [@antoniedik](#):
>
> `button#switch-Status\ Flash\ Sale`

I think this is the problem, since you’re targeting only that specific button. You should change it to` [data-test="app-switch-view"]` and append the `<pre><span><style>` tags

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [June 27, 2022, 1:09am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/8 "2022-06-27T01:09:09Z")

</div>

```auto
<pre><span><style>
[data-test="app-switch-view"] {
  position: relative;
  margin-left: 8px;
  flex-shrink: 0;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 52px;
  height: 21px;
}

```

Like that.

---

<div class="post-metadata">

**Author:** ![antoniedik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antoniedik/32/44061_2.png) [@antoniedik](https://community.glideapps.com/u/antoniedik)\
**Post date:** [June 27, 2022, 1:09am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/9 "2022-06-27T01:09:56Z")

</div>

> [@antoniedik](#):
>
> `button#switch-Status\ Flash\ Sale`

the code works fine but it seems the target is not quite right and I just found for targets with certain element names like.

`button#switch-Status\ Flash\ Sale`  
I wish I could target all switch components.  
if using this code.

[data-test=“app-switch-view”]

css not working.  
it already exists  
`<pre><span><style>`

---

<div class="post-metadata">

**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:** [June 27, 2022, 1:13am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/10 "2022-06-27T01:13:11Z")

</div>

Can you send some screenshots over on how that is not working? What is not “quite right” in this case?

---

<div class="post-metadata">

**Author:** ![antoniedik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antoniedik/32/44061_2.png) [@antoniedik](https://community.glideapps.com/u/antoniedik)\
**Post date:** [June 27, 2022, 1:25am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/11 "2022-06-27T01:25:50Z")

</div>

> [@antoniedik](#):
>
> [data-test=“app-switch-view”]

 ![ios style](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/5/85f0505c5185298c5afc477a42077ec8ab30ba3f.png)  
it works well.

 ![ios style not working](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/3/13d54ec364c85e8adfc0e69e18a96be3cef114c0.jpeg)  
it’s not working.

---

<div class="post-metadata">

**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:** [June 27, 2022, 2:21pm UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/12 "2022-06-27T14:21:02Z")

</div>

I believe you have more code below your screenshots so my test is not going as it should (some broken components, but nevertheless I will show what I have here).

With your code (testing 2 buttons with different names, and added background: red to the code): the targeted switch is pushed to the left a bit, and the background is red.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/6/06a9f738a8ddbc2f621d7b8b90a93d3607b79cdb.png)

With my new code, realizing that the data-test level is 1 level above the “button” so I adjusted it.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/7/c74f25fd71d60d12db5aa054f9de9332e6e97044.png)

So, in short, it should be:

`[data-test=“app-switch-view”] button`

---

<div class="post-metadata">

**Author:** ![antoniedik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antoniedik/32/44061_2.png) [@antoniedik](https://community.glideapps.com/u/antoniedik)\
**Post date:** [June 27, 2022, 3:17pm UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/13 "2022-06-27T15:17:37Z")

</div>

Wow cool, I’ll give it a try

---

<div class="post-metadata">

**Author:** ![antoniedik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antoniedik/32/44061_2.png) [@antoniedik](https://community.glideapps.com/u/antoniedik)\
**Post date:** [June 27, 2022, 3:32pm UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/14 "2022-06-27T15:32:12Z")

</div>

unfortunately, still can’t.  
thanks for helping master ThinhDinh and master Darren.

Sorry if my question bothered you.

maybe later someone can read this case and can help.

---

<div class="post-metadata">

**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:** [June 27, 2022, 11:57pm UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/15 "2022-06-27T23:57:13Z")

</div>

Can you paste the full code here so I can take a look at it?

---

<div class="post-metadata">

**Author:** ![MattLB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mattlb/32/41284_2.png) [@MattLB](https://community.glideapps.com/u/MattLB)\
**Post date:** [June 28, 2022, 12:01am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/16 "2022-06-28T00:01:48Z")

</div>

The Glide experts are ridiculous ! Great to see !!

---

<div class="post-metadata">

**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:** [June 28, 2022, 12:03am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/17 "2022-06-28T00:03:37Z")

</div>

Just contributing my part to make this community great 😅

---

<div class="post-metadata">

**Author:** ![antoniedik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antoniedik/32/44061_2.png) [@antoniedik](https://community.glideapps.com/u/antoniedik)\
**Post date:** [June 28, 2022, 2:13am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/18 "2022-06-28T02:13:36Z")

</div>

Finally after a night of experimenting I found the right code and it works great.  
🥴 😩 🥱  
`button[role="switch"]`

 ![solved](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/f/dfc845d3177e6348982cf4dab8e030cd7168dd8d.jpeg)

---

<div class="post-metadata">

**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:** [June 28, 2022, 2:37am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/19 "2022-06-28T02:37:33Z")

</div>

Great!

---

<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:** [June 29, 2022, 2:38am UTC](https://community.glideapps.com/t/how-to-apply-css-code-to-all-switches-component/43535/20 "2022-06-29T02:38:09Z")

</div>

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