There are 2 borders on search and email signup

[glucinth]

Good day!

I’m having trouble with my email and search buttons, which display two borders. I want to keep the oval border as default and when clicked. Currently, its default is a more rectangular border (please see photo). While when clicked or hovered over, both borders appear. Could you please assist me in fixing this? I am using the Shopify Dawn theme. Thank you!

[iCart_App]

Hello @glucinth 

You have to remove one border; it will look better that way.

[glucinth]

I agree with you @iCart_App. But apparently it happens that when I try to zero the opacity on Themes > Customize > Inputs to remove one border, there is no default border for image.  Although I achieve the oval border when clicked. Do you have any suggestion how can I retain the border on default (when not hover over or clicked)?

[iCart_App]

Hello @glucinth 

Please share the store URL so that I can check and might be provide a proper solution for you here.

[glucinth]

Here it is. Thank you!

[iCart_App]

Hello @glucinth 

Can you mention the page name that you want?

[glucinth]

Hello! The newsletter's (email/sign-up) border on homepage and the forms on contact us. All of them has no default border, not unless if it will be clicked.

[iCart_App]

Hello @glucinth 

You can try this code: it will be helpful to you 

Go to the Online Store->Theme->Edit code->Assets->base.css>add this code at the bottom of the file.

.field__input, .select__select, .customer .field input, .customer select {
    border: 2px solid #000 !important;
}

[iCart_App]

Hello @glucinth 

Please let me know if it is helpful to you.

[glucinth]

Hello @iCart_App I'm so sorry but it did not work. The borders appeared but for email/sign-up when clicked it is still double and I don't know how to remove the one that is appearing when clicked. I already checked the codes I used and couldn't find where this border came from. 😞

[iCart_App · Accepted solution]

Hello @glucinth 

You can try this code: it will be helpful to you 

Go to the Online Store->Theme->Edit code->Assets->base.css>add this code at the bottom of the file.

.newsletter-form__field-wrapper .field__input {
    border: 0 !important;
}

[glucinth]

Thank you @iCart_App!!!