How to make the newsletter section form's borders sharp? DAWN THEME

Store Design
1

In the home page, I added a new section through the customization menu and now I would like the input field’s form borders to be sharp, as in the I want the border-radius:none ;

Please refer to the picture below for clarification,

Capture2.PNG
Capture2.PNG1824×851 72.4 KB

Thank you,

URL: Abbasi (theabbasiandsons.myshopify.com)

Password: testingpage

Any help would be much appreicated

2

Hi @justauser

Kani_0-1662888224584.png
Kani_0-1662888224584.png1003×219 7.22 KB

1: Online store > themes > Actions > Edit code > Assets > base.css

2: paste code at last

.newsletter-form__field-wrapper .field__input, .newsletter-form__field-wrapper .field:after {
    border-radius: 0!important;
}
1 Like
3

hi @Kani thank you so much, it worked!

by the way, is there a way to remove the borders on the top, left, and right, and keep only below border?

I tried the following code in the same class but it did not work

.newsletter-form__field-wrapper .field__input, .newsletter-form__field-wrapper .field:after {
    border-radius: 0!important;
    border-top: 0!important;
    border-bottom: 5px !important;
    border-left: 0!important;
    border-right: 0!important;

}
1 Like
4

Hi @justauser

Then you should hide box-shadow

Kani_0-1662904739066.png
Kani_0-1662904739066.png781×166 5.55 KB

.newsletter-form__field-wrapper .field:after {
    box-shadow: none;
    border-bottom: 1px solid black!important;
}
1 Like
5

hi @Kani , thank you so much for replying, the above piece of code works but when the user hovers over the input field or when clicked the input field border is back on,

Would please be kind enough to let me know how to keep it just the border bottom even hovered or clicked?