Remove border around input fields

Store Design
,
1

Hi. I want to remove border from my input fields. I want only bottom line . i have tried some css but when i click in the input field border again comes. can you please help me with this?

Danish864_0-1725089033794.png
Danish864_0-1725089033794.png1920×1080 155 KB

Also can you please remove placeholder also when i click in it.
I want it to look like this simple.

Danish864_1-1725089385222.png
Danish864_1-1725089385222.png776×364 5.5 KB

Website Url: https://cozo-store.myshopify.com/pages/contact
Password: cozo

2

Hello @Danish864
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

3

i have updated the post with website url and password. Thank you

4

Hey @Danish864

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1725090123509.png
Moeed_0-1725090123509.png925×602 13.8 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

when you click into the input field. borders will come again.

6

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 on theme.liquid

.contact .field__input:focus{ box-shadow: unset !important; }

niraj_patel_0-1725090107597.png
niraj_patel_0-1725090107597.png841×302 4.35 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

7

I have updated my reply, check it again.

Best Regards,

Moeed