Search bar color is not matching theme settings

Store Design
, ,
1

I am having an issue with the search bar on my website being the wrong colour due to which it cannot be seen at all. I was able to identify the problem but I am not sure where this code originates from or how to fix it.

https://shopify.click/15539-49175-21858-5303-1387.webm

1 Like
2

Hi @shopeve

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

3

Hi @shopeve

This is David at SalesHunterThemes.

To change the color of input field

Follow this path:

Themes => edit code => asset => base.css

and add this code to bottom of the file base.css

.header__search .field__input {
background: transparent;
}

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

David | SalesHunterThemes team

1 Like
4

Thank you so much this worked!

5

Hey! This solved a part of the problem but the search results are still black

shopeve_0-1697480389673.png
shopeve_0-1697480389673.png1288Ă—275 58.1 KB

6

Sure its https://shopeve.in/

1 Like
7

Thanks, sorry to say but this cant be transparent. Try this one and change other color.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
div#predictive-search-option-search-keywords {
    background: blue !important;
}
8

I tried to add this code to the base.css file but the search results still appear in black

shopeve_0-1697486514922.png
shopeve_0-1697486514922.png1225Ă—698 76.9 KB

1 Like
9

Try this one. Again Same Instruction.

div#predictive-search-results {   
background: white !important;
}

And Save.

1 Like
10

This worked thank you for your help!

1 Like
11

I also had the black background of both the search bar and results - here was my fix . . .
I added this Custom CSS field on the Search Section of the Search Template.
I hope this helps someone else.

.search .field__input {
  background: #f3f3f3;
}
div#predictive-search-results {
  background: white !important;
}