Search bar color is not matching theme settings

[shopeve]

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

[Made4uo-Ribe]

Hi @shopeve 

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

[shopeve]

Sure its https://shopeve.in/

[Made4uo-Ribe]

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;
}

• And Save. 
• Result:
• 

[shopeve]

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

[Made4uo-Ribe · Accepted solution]

Try this one. Again Same Instruction. 

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

And Save. 

[shopeve]

This worked thank you for your help!

[David_SHT]

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

[shopeve]

Thank you so much this worked!

[shopeve]

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

[Grizaye]

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;
}