Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


maisierae

Question

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!

 

Link to comment

10 answers to this question

Recommended Posts

  • 0

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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!

 

Screen Shot 2021-05-27 at 10.08.55 PM.png

Link to comment
  • 0

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!

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...