Remove black border of typing fields

Hi! I want to remove the black border of all typing fields (email sign up, create account, different fields…), + change the colors of all of their backgrounds from green to grey #F5F5F5.

My website is: https://n6d92qrdc1i5zbkj-60150284501.shopifypreview.com and the password is y22.

Thanks in advance! :grinning_face:

PSA

If you remove the border make sure the background actually stands out against the background of the website to avoid accessibility issues.
:bomb: Also be aware of accessibility with the additional border in themes that should NOT be remove.
That’s used when TAB focus’ing with keyboard or accessibility controls etc DO NOT remove that focus border it’s for accessibility to clarify when a form has focus.


CSS Customization of Stiletto themes newsletter signup field input box

@martujv search first
https://community.shopify.com/search?q=Stiletto%20remove%20border%20order%3Alatest

Try the following css in a custom css settings;
:technologist: test without the !imporant declaration so future border styles can be easier to add ontop of it.

.newsletter__signup .newsletter__signup-input { border: none !important; }

or this for most text inputs

.input, input.spr-form-input, textarea.spr-form-input { border: none !important; }

:clipboard: Learn → https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

1 Like

Hey,

First of all there is no way to put the password.

Only want I can provide you the code to remove the border from the input field along with change the background from Green to provided one.

You need to paste the following code shared below in the end of theme.css file.

input#newsletter-subscribe-email {
    border: none !important;
    background: #F5F5F5;
}

Results:

If this was helpful mark as Solution and like it.

Thanks

1 Like

Thanks for the very detailed answer, it worked!

1 Like

Your welcome, for future merchants you can mark that post as the solution, thanks.