Dropdown Button for Variants

[veluxe1]

Hi, can anyone help me how to change the border/corner radius for dropdown button in product variants. And also how to change font size in the dropdown. I have tried few css but cant find/target a correct element. Below is current dropdown

I want the border - sharp rectangle and smaller font size for input fields inside

[devcoders]

Hi @veluxe1

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

[Moeed]

Hey @veluxe1

The site which you’re referring to – Cityofclothing is password protected, can you disable the password or share it so we can provide you the accurate code?

Best,
Moeed

[Laza_Binaery]

Hi @veluxe1

First, you should check the theme settings for inputs, but that will make a global change. Which is good so all inputs are the same:

Then if you really just want to chanfe those variants use this code in Custom CSS setting

.variant-option__select {
  font-size: 12px;
}
.variant-option__select-wrapper {
  border-radius: 10px;
}

And adjust values.

[NerdCurator]

Hello @veluxe1 Thanks for reaching out to Shopify community with your concern. Can you please provide the URL of your store and if it is password protected please share the password too. Thanks

[Ploqo]

I built the following fix on a Horizon store:

Before

After

The code:

.variant-option__select-wrapper {
  border-radius: 0;
}
.variant-option__select {
  font-size: 12px;
}

border-radius: 0 gives the sharp rectangle you want. font-size: 12px shrinks the text in the box. Both values are adjustable.

Where to paste it

• Online Store > Themes > Customize.
• On a product page, click the variant area to select the Product information section.
• Scroll the section settings to Custom CSS, paste both rules, Save.

For sharp corners on every input, not just the variants

• Set it once in Theme settings > Input fields > Corner radius and drop it to 0. That squares the search, quantity, and form fields too.

• It has no font-size option though, so the smaller text still needs the CSS above.

[rashid.div]

Hello @veluxe1 Thanks for reaching out to Shopify community with your concern. Can you please provide the URL of your store and if it is password protected please share the password too. Thanks this is not a big deal for me i am waiting for your response .

[oscprofessional]

Hi @veluxe1 ,
If you’re using a Shopify OS 2.0 theme (like Dawn), the variant dropdown is usually a native <select> element.

You can target it with CSS like this:

.product-form__input select,
.select__select {
  border-radius: 0 !important;  
  font-size: 14px !important;   
  border: 1px solid #000;
  padding: 10px 12px;
}

.select::after {
  border-radius: 0;
}

If that doesn’t work, inspect the dropdown in your browser (F12) because some themes use different class names. You may need to target something like:

.product-form select {
  border-radius: 0 !important;
  font-size: 14px !important;
}

[Steve_TopNewYork]

Hey @veluxe1 ,

You can usually achieve this with CSS by targeting the variant picker’s <select> element.

For many Shopify themes (including Dawn based themes), something like this should work:

.variant-select select,
.product-form__input select,
select.select__select {
border-radius: 0;
font-size: 14px;
}

If your theme uses different class names, the selectors above may need to be adjusted.

Could you also let us know which Shopify theme you’re using (and its version)? If it’s a custom or third party theme, sharing your store URL (and password if it’s password protected) will help identify the correct selector and provide an exact solution.

If you found my reply helpful, feel free to mark it as the accepted solution so it can help other merchants following this discussion.

Thank You !

[ZestardTech]

Hello @veluxe1

Could you please provide the URL/ password to your store so that I can check it and provide you with the exact solution?

[GencerKarakaya]

Hello @veluxe1

From the screenshots, it looks like you’re using the Horizon theme, so targeting .variant-option__select is the right approach.

If your goal is square corners and a smaller font size, this CSS is sufficient:

.variant-option__select-wrapper {
  border-radius: 0;
}

.variant-option__select {
  font-size: 12px;
}

A small tip though: before adding custom CSS, check Theme Settings → Input fields → Corner radius.

If you set the global corner radius to 0, all form controls (search, quantity, inputs, etc.) will become square automatically. In that case, you only need custom CSS for the font size if you want the variant selector to use a smaller font.

If you’re planning to support multiple themes (Dawn, Horizon, Prestige, etc.), avoid relying on Horizon-specific class names. Instead, inspect the rendered markup in your theme and target the theme’s own variant picker classes, as these selectors can differ between themes.

If you can share your store URL (or a preview link), I can suggest the most appropriate selector for your specific theme.

[Weaverse]

Hi @veluxe1,

In Shopify Dawn and most Official OS 2.0 themes, the variant dropdown selector uses a custom <select> class (.select__select / .product-form__input select).

Here is the exact CSS snippet to make the dropdown borders sharp rectangles (border-radius: 0) and reduce the font size:

/* Target Variant Dropdown Select Inputs */
.product-form__input .select__select,
select.select__select,
.variant-radios select {
  border-radius: 0px !important; /* Sharp rectangular corners */
  font-size: 13px !important;    /* Smaller font size inside dropdown */
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  min-height: 42px !important;   /* Adjust height if needed */
}

/* Target Options Inside the Dropdown List */
.product-form__input .select__select option {
  font-size: 13px !important;
}

Where to paste this code:

Method 1: Direct in Theme Editor (Recommended & Safe)

1. Go to Online Store > Themes > Customize.
2. Open the Default Product page template from the top dropdown menu.
3. Click on Product Information (or Theme Settings) on the left sidebar.
4. Scroll down to Custom CSS on the right panel.
5. Paste the code snippet above and click Save.

Method 2: In base.css File

1. Go to Online Store > Themes > Edit Code.
2. Search for base.css (or theme.css) under the Assets folder.
3. Scroll to the very bottom of the file and paste the CSS code.
4. Click Save.

You can adjust 13px to your preferred font size (e.g., 12px or 14px). Let me know if that targets your specific theme dropdown cleanly!

If you found my reply helpful, feel free to mark it as the accepted solution so it can help other merchants following this discussion.

Thank You !

[veluxe1]

Great it works! Can you help me one more thing, how to remove/disable grey hover/overlay when we click that dropdown/variants?

[veluxe1]

Great it works! One more thing, how to remove/disable grey hover/overlay when we click that dropdown/variants?

[Laza_Binaery]

Well, you can set color to transparent. In same Custom CSS setting or any color you want

.variant-option__select-wrapper:hover .variant-option__select {
    background-color: transparent;
}

[Ploqo]

Add this in the same Custom CSS box you used before (Product information section):

.variant-option__select-wrapper:hover .variant-option__select {
  background-color: var(--color-variant-background);
}

• This holds the dropdown at your theme’s normal colour on hover and on click, so there is no grey flash.
• Optional: to stop darkening the border on hover:

.variant-option__select-wrapper:hover {
  border-color: var(--color-variant-border);
}

• transparent works too, but --color-variant-background keeps it matched to your theme if you ever change your colours.

Tested on Horizon.