Make Variant selector boxes have rounded corners?

[nvisibl1]

is it possible to have the variant selector boxes with rounded corners instead of square?

[Huptech-Web]

Hi @nvisibl1
Can you provide more details like the store URL & password if the store is password protected?
Screenshots

[nvisibl1]

Hi Rishi, sure >> https://toltano.com/products/cosybabe-3-piece-knit-set

Thank you

[Huptech-Web]

Hi @nvisibl1
Add the Below Css to the section-main-product.css file

.product-form__input .select {
  border-radius: 36px;
  display: inline-block;
  overflow: hidden;
  border: 1px solid #cccccc;
}
.product-form__input select {
  height: 40px;
  border: 0px;
  outline: none;
}

In base.css find & replace with the below CSS. To understand what to do with the below code, you can search element and remove the line box-shadow. In short terms, your CSS should look like the below once you remove box-shadow rule.

.field::after, .select::after, .customer .field::after, .customer select::after, .localization-form__select::after{
pointer-events: none;
  content: "";
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: .1rem solid transparent;
  border-radius: var(--inputs-radius);
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}
.field::before, .select::before, .customer .field::before, .customer select::before, .localization-form__select::before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  z-index: -1;
}
.field__input:focus, .select__select:focus, .customer .field input:focus, .customer select:focus, .localization-form__select:focus.localization-form__select::after {
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field:hover.field::after, .select:hover.select::after, .select__select:hover.select__select::after, .customer .field:hover.field::after, .customer select:hover.select::after, .localization-form__select:hover.localization-form__select::after {
  outline: 0;
  border-radius: var(--inputs-radius);
}

Once you update the css it will look something like this

if you want less rounded corners then you can update the border-radius like this in section-main-product.css

.product-form__input .select {
  border-radius: 5px;
  display: inline-block;
  overflow: hidden;
  border: 1px solid #cccccc;
}

This will look like below

[nvisibl1]

Thank you Sir

“In base.css find & replace” - find and replace what please?

[Huptech-Web]

Hi @nvisibl1
As i don’t have store access i can’t tell you the exact position of css but i have tried to figure out the line number with the use of chrome inspector
Check the below code i have updated it with line number

Goto line no. 1711
.field::after, .select::after, .customer .field::after, .customer select::after, .localization-form__select::after{
pointer-events: none;
  content: "";
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: .1rem solid transparent;
  border-radius: var(--inputs-radius);
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

Goto line no. 1694
.field::before, .select::before, .customer .field::before, .customer select::before, .localization-form__select::before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  z-index: -1;
}

Goto line no. 1759
.field__input:focus, .select__select:focus, .customer .field input:focus, .customer select:focus, .localization-form__select:focus.localization-form__select::after {
  outline: 0;
  border-radius: var(--inputs-radius);
}

Goto line no. 1738
.field:hover.field::after, .select:hover.select::after, .select__select:hover.select__select::after, .customer .field:hover.field::after, .customer select:hover.select::after, .localization-form__select:hover.localization-form__select::after {
  outline: 0;
  border-radius: var(--inputs-radius);
}

[nvisibl1]

Oh I see, so I look for the line numbers (or similar code) and replace the code thats already there with this code?

Sorry i’m quite new to this

[Huptech-Web]

Hi @nvisibl1
No problem
Look for a similar code, and as I previously said I have checked the CSS using Chrome inspector so maybe line no. is still incorrect but you can follow a similar code strategy.
Still, let me know if you need my help on this.
Thank you.

[nvisibl1]

Great Rishi, thanks a lot for your help - I really appreciate your kindness

[nvisibl1]

Hi Rishi

I have just noticed since the change that the Input Box borders in my footer have disappeared, Turned black and cant be seen any more

Can you help me get these back? In White

Much appreciated

[Huptech-Web]

Your Most Welcome @nvisibl1 . Happy to hear that my solution works for you!

[Huptech-Web]

Sure @nvisibl1 , Let me check it!

[nvisibl1]

Also the email forms on the home page and contact page

The boxes have gone/turned white?

[Huptech-Web]

Hi @nvisibl1
Add below CSS to the base.css

.newsletter-form__field-wrapper .field__input, #FooterCountryForm .localization-form__select, #ContactForm .field__input{
  box-shadow: 0 0 0 calc(.1rem + var(--inputs-border-width)) rgba(var(--color-foreground),var(--inputs-border-opacity));
}

[nvisibl1]

Thank you. Im very grateful