Variant Selector & Quantity Black when applying a transparent background

[lucyh]

Hey all! Super appreciate the help, I applied a transparent color scheme so that I could apply a background image, which all worked great. However it makes the Variant selector, quantity selector and button black. I know how to fix the button, but how do I solve the issue for the other two? 

I would love for it to be white, instead of black (or is there a way to set the default color to white, instead of black when messing with transparency?) 

 

[goldi07 · Accepted solution]

Hello @lucyh Thanks for the screenshot and details! When you apply a transparent background to the section (like for a background image), the variant selector and quantity inputs often default to black because the input background becomes transparent too, and their text color stays dark — blending with the image or appearing black.

How to Fix the Variant & Quantity Selectors
You’ll need to manually style the background and text color of these form elements in your CSS to override the default behavior when transparency is applied.

Here’s what you should do in your theme’s CSS (e.g., in theme.css or base.css, depending on the theme):

.select__select,
.quantity__input,
.select, 
.quantity {
  background-color: white !important;
  color: #000 !important;
  border: 1px solid #ccc; /* optional: improves visibility */
}

/* Optional: match padding and border-radius if needed */
.select__select,
.quantity__input {
  padding: 10px;
  border-radius: 4px;
}

Where to Add This:
. Go to Online Store > Themes > Edit Code

. Find your theme's CSS file (likely in assets/theme.css or base.css)

. Paste the code at the bottom of the file

This forces the background of the dropdown (variant selector) and quantity input field to be white, regardless of transparency applied to the section or card they sit on.

try this ..if you need any help plz let me know 

Thank you 😊

[lucyh]

This worked, thanks to much!! 

[goldi07]

M glad 😊 that worked if you need any help please let me know 😊 

Thank you 😊

[DrewOswald]

Hello, you should change the background color for that color scheme back to a solid color instead of transparent. #FFFFFF is good this will be the background color for your inputs.

Then make the background transparent by adding this CSS to the Custom CSS section in "Product information":

product-info {
background: transparent;
}

[lucyh]

This worked too, and super simple! Appreciate it!