Remove border around input fields

Store Design
,

Topic summary

Main issue: Remove borders from contact form input fields (keep only a bottom line) and hide the placeholder text on focus. OP notes borders reappear when clicking/focusing the field.

Key actions/solutions:

  • Store preview URL and password were provided so others could inspect.
  • A helper suggested adding custom CSS in theme.liquid (above ) and shared a result screenshot showing simplified inputs. OP replied that borders return on focus.
  • Another helper provided a focused-state fix targeting Shopify’s default focus style: add in theme.liquid
    • .contact .field__input:focus { box-shadow: unset !important; }
      This aims to remove the focus box-shadow that looks like a border.
  • The first helper said their reply was updated (details not visible in the snippet). Images illustrate both the current and desired look.

Status:

  • No confirmation yet that the focus border issue is fully resolved.
  • The request to hide placeholder text on focus has not been explicitly addressed with code.
  • Discussion appears ongoing; no accepted solution noted.
Summarized with AI on December 20. AI used: gpt-5.
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.

1 Like
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

1 Like
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