Search box CSS issue

Store Design
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

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

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

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.

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.