Search box CSS issue

Store Design

Topic summary

Issue: On the Shopify search results page, the search input appeared invisible (white background, no border, white typing text), making it hard to see.

Goal: Display a visible search box with a white background, a black border, and readable black text while typing.

Actions taken:

  • Guided steps: Online Store > Edit Code > theme.liquid; add custom CSS near the end (before / within the style section).
  • CSS provided to style elements:
    • .search__input.field__input { border: 1px solid black !important; }
    • .template-search__search .search label.field__label { color: black !important; }
    • .search__button svg { color: black !important; }

Outcome: Border, label, and icon colors were corrected. Remaining issue was the input’s typing text still appearing white; the original poster changed the input text color themselves and confirmed it worked.

Status: Resolved. No further assistance requested.

Notes: Multiple screenshots illustrated the invisible input and the corrected appearance. The exact CSS used to set the input text color was not shared.

Summarized with AI on December 17. AI used: gpt-5.
1

On my search results page found here https://downunderthunder.com.au/search?q=satisfyer&options%5Bprefix%5D=last

The search box is white and has no border making it invisible. How do I change it to have a black border and white background.

Untitled.jpg
Untitled.jpg999×497 40.9 KB

Untitled2.jpg
Untitled2.jpg999×496 46.1 KB

2

Hey @JayFinlay

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-1728438375224.png
Moeed_0-1728438375224.png1905×916 211 KB

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

Best Regards,
Moeed

1 Like
3

Thanks so much but the actual box to type in is still invisible with no black border and the text is white like the background. Example of the search box I am refering too. I made the box black but I can’t figure out how to make just the border black with black text while typing.

Untitled.png
Untitled.png2956×1896 454 KB

1 Like
4

Hey @JayFinlay

Keep the previous code and add this new code above in the end of theme.liquid.

.search__input.field__input {
    border: solid 1px black !important;
}
.template-search__search .search label.field__label {
    color: black !important;
}
.search__button svg {
    color: black !important;
}

RESULT:

Moeed_0-1728439014787.png
Moeed_0-1728439014787.png1627×600 112 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

Thank you again! Almost perfect just missing one thing, the text itself as you type in the box is still white so you can’t see what you have written.

Edit: Did it myself, thank you.

1 Like
6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.