How can I enable a persistent border on selected thumbnails?

Shopify Discussion
1

I need help with enabling a border on my thumbnail images when selected. I’m using the Flex them Out of the Sandbox.

I tried this code below, but “active” only shows the border during clicking, but it disappears when the click is released.

.product-gallery__thumbnail img:active {

border: 2px solid black;

}

2

@Josh99 try with :focus instead of :active

3

Thank you. I tried to focus, selected, and a few others with no luck. The only two that seemed to work, were active and hover, but it only showed during clicking or hovering.

4

then something else is overriding this property!

You should check via chrome dev tools what’s happening at the click event

5

Thanks, any tips on which dev tool feature to use? I’ve only used it to inspect elements before

6

well, @Josh99 try to simulate the different behaviour with element status override (:hov selector after the filter input) or just follow the computed styles as they change during the click → after click events

7

Hello @Josh99

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

8

Thanks, here it is: https://4tsa3df9w68sjk8u-2837839961.shopifypreview.com

9

Here’s an updated preview link: https://nxsxnv21is4mwj5w-2837839961.shopifypreview.com