Increase font size for items in drop down lists

Ask for Help
1

I have been asked to increase the font size of the items in the drop down lists in my app.

I am able to identify the css style for list items and can change these using the inspector in the browser but these changes are only temporary and entering the css updates in Glide does not persist these changes when the browser is refreshed. Something is overriding my custom CSS.

I found this topic which is closed so I am curious if there is another thread that addresses this need.

would love any guidance. THANKS

Here’s the CSS that works in the inspector but has no effect in the glide app

span.wire-dropdown___StyledSpan-p3ti25-10.efWkME {
font-size: 21px !important;
color: green !important;
}

Here’s what the google AI tells me to apply the style to every item in the list. this works in the inspector but NOT in the app

/* #r3: li {
color: red !important;
font-size: 40px !important;
} */

#r3\ li.wire-dropdown___StyledLi-p3ti25-8.gPJonX span {
color: green !important;
}

2

These things should never be used in CSS, they are not stable and can vary across different OS/browsers.

It should be something like:

span[class*="wire-dropdown___StyledSpan"] {
font-size: 21px;
color: green;
}
1 Like
3

thanks for the advice and the css. I have aded the css to the app but it does not have any effect on any of my drop down lists.

what / how do i specify the css class im the glide component in the app?

for example do i need to specify the name in the css class for the drop down list ?

i have tried that as well and i dont see any change in the appearance of the items in the list.

thanks.

4

Works for me.

CleanShot 2025-05-25 at 13.02.03@2x
CleanShot 2025-05-25 at 13.02.03@2x2592Ă—1540 177 KB

5

How would you adjust that to only target one specific choice component with a custom class name?

1 Like
6

I guess this works:

.custom-class-name span[class*="wire-dropdown___StyledSpan"] {
font-size: 21px;
color: green;
}
1 Like
7

hmm, I just tried that and it doesn’t appear to work. Did you test it?

1 Like
8

You made a good point here. The dropdown has a special setup. The “list” that opens up belongs to another “layer” compared to the original choice component.

Let’s say “normal” layer for the choice before opening the dropdown, and “overlay” for the part that only shows up when you open.

I expected Glide to tie that “overlay” to the custom-class-name part as well, but actually it doesn’t.

The unique thing about those is an ID, in this format “:r[3-digit number]” but I don’t know if I should trust it or not (e.g: :r196, :r197, :r198).

1 Like
9

I would prefer all the dropdown lists use the consistent and larger text size so i don’t believe i need to create a specific custom class name.

that said - i have 2 drop down lists on the page and neither one of them is picking up the styles from

span[class*=“wire-dropdown___StyledSpan”] {
font-size: 21px;
color: green;
}

Any idea why?

10

Have you got the Preview Custom CSS switch enabled?

1 Like
11

i don’t have that option. only Use Compiled CSS

12

If you turn off “Use compiled CSS” then you should see the preview custom css switch

1 Like
13

doh. enabled it and i am seeing style changes to the items in the drop down list - although i had made earlier changes using span.wire-dropdown___StyledSpan-p3ti25-10.efWkME {

and my text is red… i will get this working now that you pointed me in the right direction.

thanks!

14

As ThinhDinh mentioned try to avoid unstable class names.. they will break/ not look right across browsers

2 Likes
15

There is a difference in this dropdown/button component that you can associate with the class name button[data-state="open"]. However, the query must be performed at a higher level—perhaps the root or body—to target this “select option”. I believe you can use a conditional to track it.

1 Like
17

i DID get the styling to apply in the has selection using the explicit name

div.wire-dropdown___StyledDiv-p3ti25-2.drhhlW.has-selection {
  font-size: 130%;
  color: green;
}

if there is a way to update this syntax like the DDL that would be cool. but I have a fixed set of users on dedicated tablets for the food pantry so this hack will suffice for now.

18

What are you trying to do here? I assume you’re targetting the text that appears as the “chosen” selection when you’re not opening the dropdown?

I’m not sure how this is relevant. Do you mean they have all checked your fix and it all worked on their devices?