Borders around text fields on Dawn theme

[BigMort]

I’m working on a custom Shopify section (Dawn theme) and I’m having trouble removing the default borders from text input fields. Despite setting border: none and using box-shadow for styling in my CSS, the inputs still display visible black border outlines that don’t match my design.

The relevant CSS I’m using:

.field input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 8px;
  background-color: #f5f5f5;
  box-shadow: 0 0 0 2px #dddddd;
}

The borders persist even after:

• Setting border: none

• Adding outline: none on focus

• Using box-shadow instead of borders

• Hard refreshing the browser (Ctrl+Shift+R)

The inputs appear to have a thin black border/outline that I can’t remove through CSS. Has anyone experienced this with Dawn theme sections? Could there be global CSS from the theme overriding my styles, or is there something specific about Shopify’s form rendering I’m missing?

Any help would be appreciated!

[TheScriptFlow_1]

Hey @BigMort,

Thanks for explaining it. Could you please share the store url so that I can take a look and provide you the solution code. As you are working on the custom section so it might be the coding conflicting or the border comes from the other css property.

[BigMort]

Sure, the URL is flightpath.studio. Use sowdru to enter

[EmbedAny]

Hi @BigMort

What you’re seeing isn’t a normal CSS border; it’s most likely coming from Dawn’s default input styles or the browser’s native appearance that Dawn partially overrides.

Add this stronger and more targeted CSS to your section (or theme editor “Custom CSS” area):

.field input[type=“text”],
.field__input {
border: none !important;
outline: none !important;
box-shadow: 0 0 0 2px #dddddd !important;
background-color: #f5f5f5 !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
}

.field input[type=“text”]:focus,
.field__input:focus {
outline: none !important;
box-shadow: 0 0 0 2px #aaa !important;
}

Sometimes Dawn adds an extra “border” via :after or :before. You can disable them safely:

.field__input::after,
.field__input::before {
display: none !important;
content: none !important;
}

Try it, hopefully it will work.

[suyash1]

@BigMort please add this css to the very end of your base.css file and check

shopify admin->online store->themes->edit theme code->assets->base.css

.field:after, .select:after, .customer .field:after, .customer select:after, .localization-form__select:after{border:none; box-shadow:none !important;}

[devcoders]

Hi @BigMort

Try using this CSS. If it still doesn’t work, please send me your store URL — I’ll check it myself and provide you with the correct CSS.

.field input[type="text"],
.field textarea,
.field select {
  width: 100%;
  padding: 14px 16px;
  border: none !important;
  border-radius: 8px;
  background-color: #f5f5f5;
  box-shadow: 0 0 0 2px #dddddd !important;
  outline: none !important;
  appearance: none;
  -webkit-appearance: none;
}

.field input[type="text"]:focus,
.field textarea:focus,
.field select:focus {
  border: none !important;
  outline: none !important;
  box-shadow: 0 0 0 2px #aaaaaa !important; /* Optional: your focus color */
}

[AndyX]

The Dawn theme applies its own input styles via the .field__input class. Even if you target input[type="text"], the theme’s CSS adds a subtle border and box‑shadow on .field__input and its wrapper.

To remove the border around a text box in a custom section you need to override those styles with higher specificity. For example:

<style>
  .custom-section .field__input {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: #f5f5f5;
  }
  .custom-section .field__input:focus {
    box-shadow: none !important;
  }
</style>
<div class="custom-section">
  <div class="field">
    <input class="field__input" type="text" placeholder="Your text">
  </div>
</div>

Using a wrapper class like .custom-section in your section ensures your overrides don’t affect other inputs. The important things are:

• Target the .field__input class (Dawn assigns this class via JavaScript) rather than just input[type=text].

• Remove both the border and the box‑shadow. Dawn uses a box shadow to simulate the border on focus, so setting box-shadow: none is necessary.

• If you still see a border, you can override the CSS variable --inputs-border-width or set appearance: none on the input.

A quick way to see what rule is adding the border is to open Developer Tools (right‑click → Inspect) and look at the computed styles for the input. Then override those rules with a more specific selector.

[Dan-From-Ryviu]

@BigMort

sowdru

Please add this code to Custom CSS in theme settings

.customization-section .field:after {
  box-shadow: unset;
}
.customization-section .field {
    align-items: center;
}

Best regards,
Dan from Ryviu: Product Reviews App

[BigMort]

Thank you very much for your help, it worked! I just need to resize the text boxes now Thanks again

[BigMort]

Thanks for your help, everyone! I appreciate all the advice, the issue has now been solved!

[devcoders]

Hi @BigMort

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts.

Best regards,
Devcoder

[suyash1]

@BigMort I think your issue is solved now, do let me know if you face any issues later