Can't Change Color of Search Box and Search Suggestions - Sense Theme

I need to change the color of the search box and search suggestions on my header menu. I’d like for both to be black text on a white background. My header menu is currently black with pale gray text, and needs to stay that way.

How do I change the color of the search box and search suggestions WITHOUT changing the colors of the header menu??

To do that you need to inspected to element tag of search box and search suggestion and then use the Cascading Style Sheets (CSS) to style each items on that.

If you not familiars with code, you can ask to developer help you.

@ebo8302 - can you share this page link?

Site: turbojavacoffee.com

Password: Indiana15701

Hello @ebo8302 :waving_hand:

Inside Shopify Admin, you can go to Edit theme code, open file base.css, and add this code at the bottom

.search-modal__form .search__input {
    color: #000;
    background-color: #FFF;
}

.search-modal__form .predictive-search {
    background-color: #FFF;
}

.search-modal__form .predictive-search * {
    color: #000;
}

Hope that helps!

Hope that helps!

When I click the search bar, it no longer has the word “Search” and doesn’t show the magnifying glass icon on the right.

These were showing up previously (see my screen shots in original post) but you can even see they don’t show up in your screen shot. :disappointed_face:

@ebo8302 - please add code given by @ZenoPageBuilder and then add this css for search option to show up

button.search__button.field__button {color: #000;}

Hi @ebo8302 I think if you add the following css to what was previously provided it should fix icons

.header__search .search__button,
.header__search .field__label,
.header__search .reset__button {
    color: #000;
}

.header__search .reset__button:not(:focus):after {
    border-color: #DDD;
}