How to Style Selected Size Option with Only an Outline Border?

[Senku]

When a size is selected, i want it only show an outline border around the selected size—no fill, no shadow, no background change. Just a simple border highlight, like in the second image. can you please help me with this?

[BiDeal-Discount]

Hi

let try to add this CSS style:

.product-form__input--pill input[type=radio]:checked+label {
  background-color: transparent;
  color: initial;
  border-color: rgb(var(--color-foreground));
}

don’t forget to change the border width to 2 in your theme config to see it better

[Senku]

but i want it shows border in the selected size

[BiDeal-Discount]

• if you want border for both state (unselect & selected) have same width => should update on theme config customization
• if you only want border for selected state larger => add more style for that class is: border-width: 2px;

[Senku]

why when i show color like this not text, why border is not the same as size options?

[BiDeal-Discount]

color variant have different class name so the css style won’t apply for that

[Senku]

so how can i edit that?

[BiDeal-Discount]

can you share me the url for that product to let me check

[Moeed]

Hey @Senku

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed