Help!! hover colour for variant size is black and not sure how to change it?

[mayatranquila]

hi! I would like to change this - when i hover or click on a size its black, how can I change this colour but ONLY for the variant picker?? I’d like to change it to a light grey colour… thank you

[ZestardTech]

Hello @mayatranquila

Please share your store URL and password.
So that I will check and let you know the exact solution here.

[GTLOfficial]

Hello @mayatranquila
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.is-active .dropdown__item-button {
background-color: #fff !important;
}
.is-active .dropdown__item-button:hover {
background-color: #cecbcb !important;
}
@media (hover: hover) {
.dropdown__item-button:hover:not([disabled]) {
background-color: #cecbcb !important;
}
}

result

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

[Vinsinfo]

@mayatranquila Please follow the below steps to update the hover color of the variants dropdown. Let us know whether it is helpful for you.

1. From admin, go to “Online Store” → “Themes”.
2. Click the action button from the current theme and select “Edit code”.
3. Search and locate the base.css file. Add the below CSS code in the base.css file at the bottom of the file, like in the below attached screenshot.

.product-selector__buttons .is-active .dropdown__item-button, .product-selector__buttons .dropdown__item-button:not([disabled]):hover {
    color: #FFFFFF !important;
}

Result will be like,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.