Customizing Variant picker border color, thickness and visibility

[Chucklesfaq]

How can I make the border of the dropdown box used as Variant picker always visible?

Right now, it becomes visible only on hovering. I want it to be solid black color and always visible.

https://www.chuckles.store/products/vintage-nostalgia?variant=48137145418050

[Liquid_xPert_SJ]

@Chucklesfaq 

please add below code into your base.css file

Online Store > Edit Code > Assets > base.css file

.product-form__input--pill input[type="radio"] + label {
	border-color: #000 !important;
}

Thanks

[Vinsinfo]

@Chucklesfaq Please follow below steps to always visible the border of the drop-down box. Let me know whether it is helpful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Search "section-main-product.css" file and paste below code at the bottom of the file.

.product__info-wrapper .product-form__input .select {
    box-shadow: 0 0 0 calc(.1rem + var(--inputs-border-width)) rgba(0 0 0);
}

4. Now, it will shown like below image.

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