A user applied a transparent background to display an image but encountered an issue where the variant selector and quantity selector turned black, making them hard to see.
Two solutions were provided:
CSS override approach: Add custom CSS targeting .select__select and .quantity__input to force white backgrounds and dark text, with optional border styling for visibility. This code should be added to the theme’s CSS file (e.g., theme.css or base.css).
Color scheme adjustment: Change the color scheme background back to a solid color (like #FFFFFF) instead of transparent, then apply transparency specifically to the product info section using custom CSS: product-info { background: transparent; }
Resolution: Both solutions successfully resolved the issue. The user confirmed both methods worked, with the second approach noted as particularly simple to implement.
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?)
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 
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;
}
This worked, thanks to much!!
This worked too, and super simple! Appreciate it!
M glad that worked if you need any help please let me know
Thank you
