Smooth Out Your Shopify Store: Fixing Rounded Inputs That Turn Square on Click

Hey everyone! As a Shopify migration expert, I spend a lot of time digging through the community forums, and it's always fascinating to see the common challenges store owners face. Sometimes, it's the little things that really bug us, and a recent thread perfectly illustrates this.

Our fellow store owner, @filials, ran into a classic design snag: they had beautifully rounded input boxes for their newsletter signup and currency selector, but the moment a customer clicked or tabbed into them, BAM! They snapped back to a square shape. Talk about a jarring user experience, right? It's like having a sleek, modern car that suddenly looks like a box when you open the door.

The Annoying Case of the Disappearing Rounded Corners

filials was trying to make their site, c-tama.com (running on the popular Dawn theme), look polished and consistent. They'd successfully applied rounded borders to their input fields, but the browser's default "focus" style was overriding their efforts. This is a super common issue, and honestly, it's one of those tiny details that can make a big difference in how professional your store feels.

Here's what filials was seeing:

Notice how the selected input box has a square outline, even though the others are rounded? That's the culprit.

First Things First: Setting Your Base Rounding in Dawn Theme

Before we dive into the specific fix for the "on-click" issue, it's worth remembering that newer Shopify themes, especially Dawn, give us a lot of control right out of the box. Maximus3 jumped into the thread with a great reminder to check the theme settings first. Often, you don't need custom code for basic rounding at all!

How to Set Input & Button Corner Radius in Dawn Theme:

1. From your Shopify admin, go to Online Store > Themes.
2. Find your Dawn theme and click Customize.
3. In the theme editor, click the Theme settings icon (the paintbrush or gear icon in the bottom left).
4. Look for sections like "Inputs" and "Buttons".
5. Inside these sections, you'll often find a "Corner radius" slider. Adjust this to your desired level of rounding.

Maximus3 even shared some helpful screenshots:

These settings are great for applying a consistent rounded style across your store's inputs and buttons. However, as filials discovered, sometimes there's an extra layer of styling applied when an element is actively focused.

The "Focus-Visible" Fix: Banishing the Square Outline

This is where @Guleria came to the rescue with a super clean and effective CSS snippet. The issue filials (and many others!) faced wasn't the initial rounding, but rather the browser's default box-shadow or outline that appears when an input field is focused (clicked or tabbed into). This focus indicator is important for accessibility, but sometimes it clashes with our custom designs.

Guleria's solution targets the *:focus-visible pseudo-class, which applies styles specifically when an element is focused via keyboard navigation or when the browser determines that a focus indicator should be shown. By setting its box-shadow to none, we elegantly remove that pesky square outline without affecting the initial rounding.

Here's the CSS snippet:

*:focus-visible {
    box-shadow: none !important;
}

And guess what? filials confirmed, "That fixed it! Thank you!" Simple, yet so effective!

How to Add This Custom CSS to Your Shopify Theme:

Adding custom CSS is a common way to fine-tune your Shopify store's appearance. Here's how you can implement Guleria's fix:

1. From your Shopify admin, go to Online Store > Themes.
2. Find your current theme (like Dawn) and click the "..." (three dots) button.
3. Select "Edit code" from the dropdown menu.
4. In the Assets folder, look for a file named something like base.css, theme.css, or custom.css. If you don't have a dedicated custom CSS file, you can often add it to the very bottom of base.css or theme.css. A better practice for more extensive customizations is to create a new asset file, e.g., custom-styles.css, and link it in your theme.liquid file right before the closing tag using . For this small fix, adding it to an existing main CSS file is usually fine.
5. Scroll to the very bottom of the chosen CSS file.
6. Paste the CSS code provided by Guleria:

   *:focus-visible {
       box-shadow: none !important;
   }
   

7. Click "Save".
8. Clear your browser cache and check your store to see the changes.

Remember, the !important flag is used here to ensure this style takes precedence over any conflicting styles defined elsewhere in your theme. While generally good practice to use sparingly, for a specific override like this, it's perfectly acceptable.

So there you have it! A quick two-pronged approach to ensure your Shopify store's input fields maintain their beautiful rounded corners, even when clicked. It's these small touches that build trust and create a more polished, enjoyable shopping experience for your customers. Keep those questions coming in the community – we're all learning and growing together!