# Increase font size for items in drop down lists

**URL:** <https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024>\
**Category:** Ask for Help\
**Created:** [May 24, 2025, 5:22pm UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024 "2025-05-24T17:22:38Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [May 24, 2025, 5:22pm UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/1 "2025-05-24T17:22:38Z")

</div>

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.

> [@\[data-test=“list-item”\] .textStyle ..... Change Size?](https://community.glideapps.com/t/data-test-list-item-textstyle-change-size/52472):
>
> Hi Mate! I been trying to change size for .textStyle But is impossible. Anybody help me? Thnx in advance!

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;  
}

---

<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:** [May 25, 2025, 12:07am UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/2 "2025-05-25T00:07:59Z")

</div>

> [@Carl\_Johnson](#):
>
> -p3ti25-10.efWkME

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

It should be something like:

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

```

---

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [May 25, 2025, 4:42am UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/3 "2025-05-25T04:42:38Z")

</div>

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.

---

<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:** [May 25, 2025, 5:02am UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/4 "2025-05-25T05:02:43Z")

</div>

Works for me.

 ![CleanShot 2025-05-25 at 13.02.03@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/3/a34f812949c75d0e7c50776912414a805e97b177.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:** [May 25, 2025, 7:37am UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/5 "2025-05-25T07:37:15Z")

</div>

> [@ThinhDinh](#):
>
> It should be something like:
> 
> ```auto
> span[class*="wire-dropdown___StyledSpan"] {
> font-size: 21px;
> color: green;
> }
> 
> ```

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

---

<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:** [May 25, 2025, 8:54am UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/6 "2025-05-25T08:54:08Z")

</div>

I guess this works:

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

```

---

<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:** [May 25, 2025, 8:59am UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/7 "2025-05-25T08:59:16Z")

</div>

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

---

<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:** [May 25, 2025, 9:07am UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/8 "2025-05-25T09:07:31Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [May 25, 2025, 1:38pm UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/9 "2025-05-25T13:38:36Z")

</div>

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?

---

<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:** [May 25, 2025, 1:39pm UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/10 "2025-05-25T13:39:45Z")

</div>

Have you got the Preview Custom CSS switch enabled?

---

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [May 25, 2025, 1:40pm UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/11 "2025-05-25T13:40:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [May 25, 2025, 1:57pm UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/12 "2025-05-25T13:57:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [May 25, 2025, 2:00pm UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/13 "2025-05-25T14:00:54Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [May 25, 2025, 2:09pm UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/14 "2025-05-25T14:09:09Z")

</div>

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

---

<div class="post-metadata">

**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:** [May 25, 2025, 2:26pm UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/15 "2025-05-25T14:26:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [May 25, 2025, 2:59pm UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/17 "2025-05-25T14:59:41Z")

</div>

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

```auto
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.

---

<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:** [May 25, 2025, 11:35pm UTC](https://community.glideapps.com/t/increase-font-size-for-items-in-drop-down-lists/82024/18 "2025-05-25T23:35:32Z")

</div>

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?

> [@Carl\_Johnson](#):
>
> but I have a fixed set of users on dedicated tablets for the food pantry so this hack will suffice for now.

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