How can I change the outline color of my variant button pills?

Shopify Discussion
1

Hi, can someone help me on changing the outline color of my variant button pills? I suppose it is set to white and I cant change it. I want to put it how it is on the “Whats my size?” button

ScanMe_0-1705958941031.png
ScanMe_0-1705958941031.png591×307 5.24 KB

2

Hello @ScanMe

It would be easier to help you if you would share your product page url.

3

sure, scanme-world.com

the password is “feedback”

4

In your “section-main-product.css” file in the “assets” folder change the border property of “.product-form__input input[type=‘radio’] + label” as shown here:

.product-form__input input[type='radio'] + label {
  border: 1px solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
  background-color: rgb(var(--color-background));
  color: rgba(var(--color-foreground));
  border-radius: var(--variant-pills-radius);
  color: rgb(var(--color-foreground));
  display: inline-block;
  margin: 0.7rem 0.5rem 0.2rem 0;
  padding: 1rem 2rem;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  text-align: center;
  transition: border var(--duration-short) ease;
  cursor: pointer;
  position: relative;
}

Replace “var(–variant-pills-border-width)” with “1px”

5

You’re a legend.

At the moment the outline is grey, if I change the rgba code it goes blue, I don’t know why. Do you know how I can change it to black?

6

To make it black replace “var(–variant-pills-border-opacity)” to “1”.

border: 1px solid rgba(var(--color-foreground), 1);
7

Thanks!