How to edit the black box/border surrounding product variants??

I can find ccs codes to edit almost everything except the thin black box that surrounds the variants of products. 

I have two variants - one is Colour and the other is Quantity. 

Does anyone know how I can change the colour and thickness of the border that surrounds these? 

Thanks!

Please post the URL to a page where you want to make these changes.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Ah, yes of course.

https://bymaza.co.uk/shop

pw: ChunkyOcho

If you click onto the Escher prodcut (for example),  you will see the Select Colour and Quantity boxes that I want to edit. 

Thanks so much!

Use the following CSS as a starting point.

.ProductItem-details .variant-select-wrapper select {

  border-color: red;
  border-width: 10px;
  
  }

.ProductItem-details .product-quantity-input input {

  border-color: green;
  border-width: 10px;
  
  }
  
.ProductItem-details .product-quantity-input input:focus {

  outline-color: blue;
  outline-width: 10px;
  
  }

Let us know how it goes.

Worked perfectly! Thank you so much!! 🙂

Hello, 

Perhaps you could help me with the code to edit my product variant boxes as well. I am looking to do something like this. 

my website is Mulberrypaperco.com

Thank you, 

Hails

@Hails0630

It appears you've already achieved this effect?

If not can you explain in more detail what you want to acheive?

Ahhh, I am working on a mac and it i displaying like the photo below, so I wasn't quite sure if I was achieving the effect. Is there anything I can do to have the mac display more like it is in the photo you posted?

Thank you!

@Hails0630

Is your browser Safari? I'm on macOS/Chrome.

Yes, it’s safari. 

Apparently the issue has to do with Safari not supporting the gap property for flex.

Supposedly Apple has released a new version recently that finally does support gap. Version 14.1. Although it may be years before many folks are on versions later than v14.1.

So the solution involves trying to fix flex on Safari with a margin hack. Perhaps use grid instead. Not sure how long Safari has supported grid. Or use one of the older techniques such as float.

I began to tinker with a flex hack but so far I'm not satisfied.

If anyone has a solution please pitch in!