Website search bar font colour is all white and it cannot be read at all.

[Matt_TYH]

I recently made some updates to my theme and realized that my search bar has turned all white. I assume it's the font color that got changed because it is all white but the thing is I did not touch anything to do with the font colors. The search bar still works and I can search up products but it is all white and I have no idea how to change it back even though I've looked all over the theme settings.

Has anyone else ever experienced this before? Some assistance on this would be greatly appreciated!

[Huptech-Web · Accepted solution]

Hi @Matt_TYH 
To get the search visible properly you can add below CSS code to component-predictive-search.css, It will show like the: https://prnt.sc/TJWEAqhoPqun

div#predictive-search-results-groups-wrapper {
    background-color: #253e73;
}

And below css to component-search.css

.search__input.field__input {
    color: black;
}
[data-predictive-search-search-for-text] {
    color: black;
}

[Huptech-Web · Accepted solution]

Hi @Matt_TYH 
To get the search visible properly you can add below CSS code to component-predictive-search.css, It will show like the: https://prnt.sc/TJWEAqhoPqun

div#predictive-search-results-groups-wrapper {
    background-color: #253e73;
}

And below css to component-search.css

.search__input.field__input {
    color: black;
}
[data-predictive-search-search-for-text] {
    color: black;
}

[Matt_TYH]

Thank you so so much, that's what I was looking for. With these codes I can also play around with the color as well!

[anniebtt]

Thank you, this worked for me!!

Is it possible that you can help me change the color for the results please?

[Dan-From-Ryviu]

Did you change the color in any Scheme of your theme? If you don't mind, please share your store URL so I can check and give you the code to solve the solution.

[Matt_TYH]

I did play around with the theme's colour scheme, but I tried to change some colours back and the search bar was still white so I assumed the scheme colour change wasn't the problem but if you could search the root cause of it that would be great! so I can avoid this mistake again next time.

[Dan-From-Ryviu · Accepted solution]

Some sections use the same color scheme so when you edit colors in those settings, it could affect other pages or sections. I recommend you create a new color scheme from your Theme settings

Select that scheme to edit color so it would not affect other sections or page 

[Matt_TYH]

Well noted on that Dan, I will keep this in mind! Thanks for your help!