How to change the black outliner of product picture to other color

Store Design
, ,
1

Screen Shot 2023-02-01 at 3.42.46 PM.png
Screen Shot 2023-02-01 at 3.42.46 PM.png864×1034 134 KB

Hi for my product page, I’d like to change the black outliner when you select certain color to other color (Probably white) and change the outline width. I’m using dawn theme shop link: https://6fa09b.myshopify.com/

Any code recs would be appreciated!

2

Try adding this to base.css or wherever your main CSS is and let me know how it goes:

button.thumbnail[aria-current] {
    box-shadow: none;
    border: 1px solid magenta;
}
3

Screen Shot 2023-02-01 at 4.45.58 PM.png
Screen Shot 2023-02-01 at 4.45.58 PM.png972×1048 61 KB

It turns into a mix of black and magenta. Any suggestion?

4 
button.thumbnail[aria-current] {
    box-shadow: none;
    border: 1px solid magenta;
}

button.thumbnail[aria-current]:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
}

Whoops, forgot about the focus indicator try this instead

5

Works great! Thanks!