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{
Try using this instead:
<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.
I’ve tried it and it still doesn’t work
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).
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.
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;
}
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
<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.
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>
Can you send some screenshots over on how that is not working? What is not “quite right” in this case?
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.
With my new code, realizing that the data-test level is 1 level above the “button” so I adjusted it.
So, in short, it should be:
[data-test=“app-switch-view”] button
Wow cool, I’ll give it a try
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.
Can you paste the full code here so I can take a look at it?
The Glide experts are ridiculous ! Great to see !!
Just contributing my part to make this community great 
Great!
