Dawn Theme - How to get rid of the Newsletter input border?

[xnyjyh]

How do I get rid of the annoying border around the newsletter input area as well as the double border on hover? And would like to have the input area just underlined ( border-bottom: 2px solid #000; )

[niraj_patel · Accepted solution]

Hello @xnyjyh 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>

   .footer .field::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: 0.1rem solid transparent;
      border-radius: var(--inputs-radius);
      box-shadow: unset !important;
      transition: box-shadow var(--duration-short) ease;
      z-index: 1;
      border-bottom: 2px solid #000;
 }
.footer .field::before{
   pointer-events: none;
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   border-radius: unset !important;
  box-shadow: unset !important;
   z-index: -1;
}
.footer .field__input:focus-visible{
   box-shadow: unset !important;
   outline: 0;
    border-radius: unset !important;
}

</style>

[xnyjyh]

Hello, thank you so much for the code, but unfortunately it did not work 😞

[xnyjyh]

OH wait, it worked for only the footer section newsletter. But did not work on the newsletter section itself.

[xnyjyh]

UPDATE: I just changed the .footer to .newsletter. It worked fine. Solution is confirmed!