Highlight Selected Color Variant on Product

[JoeyRoo]

Is there a way to Highlight, or add a black circle around a selected color variant on my product page? When someone is looking at a product, the size has a black box so you can see what size is selected, but it's hard to see what color has been selected as well.

www.theothelabel.com

Thanks

[Guleria · Accepted solution]

Hello @JoeyRoo ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your product.css file and paste the following code at the bottom:

input[type="radio"]:checked+label {
    border: solid 1px #000 !important;
}

If you need further help don't hesitate to contact me. 
You can find the email in the signature below.

Thanks

[JoeyRoo]

Perfect. Thank you

[JoeyRoo]

Hi Guleria,

Is there a way to make the box round on this instead of square? I am looking for a small circle that will act as a border around the color without having all that extra space between the color and the black border.