Request to change the selected size option’s appearance on the product detail page (accessed via “view full details”) to a purple background with black text on both desktop and mobile. Current behavior: no color change on selection.
Access details (store URL and password) were provided. A screenshot was shared for context.
A CSS fix was suggested (add a rule in base.css): .product-form__input input[type=radio]+label { color: black !important; background-color: #c7b1ff !important; } However, the provided snippet appeared to have a syntax issue (extra/missing bracket and a typo in “label”), and it did not work.
Further feedback indicated the theme’s base.css is cluttered, making overrides difficult even with !important. Explanation was given that !important increases rule priority but may still fail if selectors don’t correctly target the elements.
Status: Unresolved. Next steps: have a developer clean/refactor the theme CSS and apply the correct, page-specific selector so the selected variant button (radio + label) reliably shows purple (#c7b1ff) background with black text.
Hey everyone, I would like to change the button select color of a specific page on my website. Right now whenever I select a size, the button does not change color at all. Basically, whenever I select a size, I would like the button to change to a purple background with black text if that makes sense. I have attached a screenshot below for a better understanding of what I am talking about. I would like it to change on both desktop and mobile devices. Thanks in advance!
Screenshot:
Hi,
Can you share your store URL please
Hi @Spaceboy14
Woould you mind to share your store password? Thanks!
Oh no, not that page. I mean the page when you click the “view full details” link.
.product-form__input input[type=radio]+label {color: black !important; background-color: #c7b1ff!important;}
}
Let me know if it work by marking it as a solution.
I think there might be a missing bracket? Otherwise it didn’t work
Thank you for the information. Seems like you have a developer who is working in your store. Let them work with that, it needs to clean your base.css. Hard to overide the code that you have.
In CSS, the !important declaration is used to give a specific CSS rule higher specificity and priority, ensuring that it overrides other conflicting CSS rules, regardless of their specificity or source order.
In this case it would be hard for us to give you the solution that you needs if all the buttons cant be called.
Gotcha, so I won’t be able to change the color?
You can, but you need someone to clean theme first.
