Disable hover over effect and change the border color

Store Design
1

Hello,

I need help with disabling the hover-over function on the variant section. At the same time, I want the black border will be visible all-time without hovering over it.

Here is the link to my product page: https://wowberrybites.myshopify.com/products/10?variant=41706772168853

Thanks for your help.

winnado11_0-1641278980709.png
winnado11_0-1641278980709.png400×225 44.4 KB

2

@winnado11 - which item shows the hover effect?

1 Like
3

@suyash1 It’s not really a hover effect, but if you click to 7 meals to choose other options, the black border will be visible. I want the black border to be visible all the time without clicking on it. Hope that makes sense

winnado11_2-1641279997870.png
winnado11_2-1641279997870.png5760×2160 1.26 MB

4

@winnado11 - please add this css to the very end of your theme.min.css file and check, should be like screenshot below

.product-form__select .form__input{
    box-shadow: 0 0 0 0.4rem var(--focus-offset-color),0 0 0 0.6rem var(--focus-color);
    outline-offset: 0.4rem;
    outline: 0.2rem solid transparent;
}

suyash1_0-1641280618418.png
suyash1_0-1641280618418.png1366×768 158 KB

1 Like
5

@suyash1 Thanks so much!

6

@winnado11 - welcome, let me know if you need anything else, you have my email below.