How to change the search bar style and text color in the search field?

lyricorpse · June 2017

When I click the search icon, I get this bar below the header/menu area:

The text "Enter your search" looks perfect, but notice that the color for typing is white, as you can see below:

My questions are:

1. How to change the color for text typed in?

2. Is there any other search bar styles I can use easily? For example, a fullscreen dim with a search field, etc.

Thanks!

Bryan · June 2017

Hi,
the only option would be those in theme options>headerr&subheader>extras
http://prntscr.com/fis928
For the color, you will need custom css. Please send a link to your page
thanks

lyricorpse · June 2017

Hi, still the website is in private state. I used the theme animal shelter and added the search bar. http://themes.muffingroup.com/be/animalshelter/

Could you just use that link as an example to explain how to add custom css? Thanks!

Bryan · June 2017

Try this css

#searchform input:placeholder {
	color:red !important;
opacity: 1 !important;
}

lyricorpse · June 2017

Hi, it's not working. The URL is https://globaltouchstones.com/

Besides of the color of the search input filed, how to change the color of the close icon of the search bar? Also how about the color of the responsive menu toggle?

Thanks!

Bryan · June 2017

The responsive menu toogle can be changed in theme options>colors
Try this css instead

#Top_bar .search_wrapper input[type="text"] {
	color: red !important;
}
#Top_bar #searchform i {
	color: red !important;
}

lyricorpse · June 2017

Thank you very much! Works like a charm.

How to change the search bar style and text color in the search field?

Comments