Guide to customize the search form in header

Hi Support Team,

I just need you to guide me on how to customize the search form that I placed in the header.
currently, it looks like this: https://prnt.sc/vy3lzz

The search functionality works well, I just wanted to customize the border-radius, border thickness, background color and text color using css code. Could you tell me what CSS code of that search form that I can use to customize it?

Thanks in advance for your support and guidance.

Regards,
Carlo

Hello,

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.whb-color-light .search-style-default input[type=text]   {
	color: #fff;
	border-radius: 25px;
	border: 1px solid white;
    background-color: red;
}

Regards.
Xtemos Studios.

Wow great! one more thing, I made the background white and since the search icon inside the search form is also white, it blends with it, making the icon invisible. I need to change that search icon color to black so that it will be visible on white background.

Thanks again.

Regards,
Carlo

Hello,

Try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.searchform .searchsubmit:after {
	color: black;
}

Regards.
Xtemos Studios.

Hi Aizaz,

Thanks for this. Sorry if need to ask for another one but I couldn’t find css to change the color of the placeholder “Search for products”. This one is currently in white so it’s also invisible. Need to change that font color to black.

Thank you very much in advance.

Regards,
Carlo

Hello,

You are Most Welcome.

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.whb-color-light .search-style-default input[type=text]::placeholder {
	color: black;
}

Best Regards.

[Author]

Posts