Search Bar custom

[THIJPF]

Hello, I would like to **modify the appearance of the search tool:** "search"

the 1st photo shows what I currently have and the second shows what I want to obtain
I'd like to have a white block with the "Search" writing in black instead of what i have now ( the opposite)

Shopify customer service advised me to modify this with custom code but I don't know much about it

Thanks in advance to those who will answer me

[suyash1]

@THIJPF can you please share this webpage link?

[THIJPF]

Here is the link
https://jz6amrzzu92a36vj-84960477508.shopifypreview.com

[suyash1]

@THIJPF - please add this css to the very end of your theme.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → theme.css

.icon--header-search{margin-left: 10px;}

.header__search-bar.predictive-search{background-color: #fff; color: #000;}

.predictive-search__input::placeholder{color:#000;}

[THIJPF]

it worked thanks a lot
but the “search” text disapperead

[suyash1]

@THIJPF add !important to last line of css, to make it like this

input.predictive-search__input::placeholder {color: #000 !important;}

[THIJPF]

It worked perfectly thanks a lot