Variant Selector & Quantity Black when applying a transparent background

Shopify Discussion
2

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 :blush:

2 Likes