Variant Dropdown Menus Text & Background Color Change (Expanse)

saraki
Excursionist
68 1 5

Hi

I would like to change the variant dropdown menu's look.

 

Right now it has a gray background, white text and blue selection.

I want the background to be white, text black and selection light gray. I would love a custom CSS code for this so I can go back and change the colors.

 

My store url: www.inibo.co

Password: secret

 

Thank you!

 

Sarah
inibo.co
pw: secret
Replies 7 (7)

PaulMartin
Shopify Partner
193 34 62

It would be helpful if you would link a specific page on your store that shows the "variant dropdown menu" that you are wanting to change.

saraki
Excursionist
68 1 5
PaulMartin
Shopify Partner
193 34 62

Thank you for attaching a page.

I think your problem has already been solved? This is what the variant dropdown is showing on my screen. If it doesn't show like that on your end, try visiting your page using a private browser or attaching a screenshot of what it looks like on your end.

Pauloo_Martin_0-1707722650486.png

 

PaulMartin
Shopify Partner
193 34 62

I just tested your website using another browser, and it seems like the design is dependent on what browser is used. With the image I attached, I was using Microsoft Edge. When I used Chrome, it is like you described.

I'll try to come up with a solution for this, hold on. 

PaulMartin
Shopify Partner
193 34 62

Hey @saraki, I took a deeper look into how this could be done. Unfortunately, styling the dropdown menu cannot be done with CSS alone. You can change its fonts but that's about it. You can use JS though to build your own custom select dropdown.

Pauloo_Martin_0-1707724303792.png

 

 

saraki
Excursionist
68 1 5

Oh no... I know nothing about JS, would you be able to do this for me @PaulMartin

Sarah
inibo.co
pw: secret
PaulMartin
Shopify Partner
193 34 62

@saraki I'd love to help. However, I cannot do it right now, I have something else grabbing my attention. So, you might want to find someone else, sorry.