How to remove the boarder boxes from the size options on a product page?

[emilyaugstudios]

Hi community! I dont suppose anyone knows how to remove the boarder boxes from the size options on a product page? I want it to display as a link underline style instead.

URL (Symmetry theme) – https://pantee.co.uk/?_ab=0&_fd=0&_sc=1&preview_theme_id=144118972631

Current Look –

What we are aiming for –

[BSSCommerce-B2B · Accepted solution]

@emilyaugstudios ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
.opt-btn:checked + .opt-label,
.opt-label {
   border: none!important;
   box-shadow: none!important;
}
.opt-btn:checked + .opt-label > span {
   text-decoration: underline!important;
}
</style>

Result:

[BSSCommerce-B2B · Accepted solution]

@emilyaugstudios ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
.opt-btn:checked + .opt-label,
.opt-label {
   border: none!important;
   box-shadow: none!important;
}
.opt-btn:checked + .opt-label > span {
   text-decoration: underline!important;
}
</style>

Result:

[BSSCommerce-B2B]

@emilyaugstudios ,please copy the newest code i've just edited 

[emilyaugstudios]

Thank you for the help! Is there a way to make the underline only appear on the selected size choice? Also do you know how I can reduce the padding between each size option too now as they look very spaced out without the border?

Current look –

What I'd like –

[emilyaugstudios]

@BSSCommerce-B2B The new code you've added is a lot better thank you! Just the padding to figure out now, I really appreciate the help!

[BSSCommerce-B2B]

@emilyaugstudios,  glad to hear that 😊 

[BSSCommerce-B2B]

Have you fixed it yet? If my solution is helpful, please like and mark the solution 😍

[emilyaugstudios]

Hi @BSSCommerce-B2B – I'm just wondering if you know how to remove the 'sold out' boxes from the size options, like the way we did above? Is it possible to just have the size option display grey/lighter instead of black when it is sold out so customers know?

[BSSCommerce-B2B · Accepted solution]

Ok  change the  previous code like this

<style>
.opt-btn:checked + .opt-label,
.opt-label {
   border: none!important;
   box-shadow: none!important;
}
.opt-btn:checked + .opt-label > span {
   text-decoration: underline!important;
}
.opt-btn.is-unavailable + .opt-label {
  background: none!important
}
</style>

Result:

[emilyaugstudios]

Thank you 🙏