change dropdown color

Store Design
,

Topic summary

A user’s contact form dropdown appears white and needs a color fix.

Solutions Provided:

Multiple developers offered CSS-based solutions with slight variations:

  • Option 1: Add custom CSS code in theme.liquid file, placed above the </body> tag
  • Option 2: Target the dropdown with CSS selector #contact_form .select-wrapper#contact-form-anlieg and set color: black
  • Option 3: Add styling for .select-wrapper select option with color property
  • Option 4: Insert CSS directly into theme.css file targeting select#contact-form-anlieg with background-color: black !important

Implementation Steps:

  1. Navigate to Online Store → Themes → Edit Code
  2. Locate either theme.liquid or theme.css file
  3. Insert the provided CSS code in the specified location

All solutions focus on changing the dropdown’s color/background-color property to black. The discussion remains open with no confirmed resolution from the original poster.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hi, for some reason my contact form dropdown is white. Can anyone help me fix it please?
https://w60880td9oml81vi-56906743879.shopifypreview.com

Daniel19901_0-1723807393381.png
Daniel19901_0-1723807393381.png754×300 7.42 KB

2

Hey @Daniel19901

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1723807657612.png
Moeed_0-1723807657612.png668×282 9.02 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @Daniel19901

Try adding this CSS it will change the color of the dropdown

#contact_form .select-wrapper #contact-form-anliegen {
    color: black;
}
4

Hello @Daniel19901

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.select-wrapper select option{ color: #000 !important; }

niraj_patel_0-1723808122323.png
niraj_patel_0-1723808122323.png544×264 11 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

5

Hello @Daniel19901

Go to online store ---------> themes --------------> actions ------> edit code------->theme.css
add this code at the very end of the file

select#contact-form-anliegen {
    background-color: black !important;
}

result

18.png
18.png451×741 151 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like