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

lyricorpse

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

lyricorpse

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

Try this css

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

lyricorpse

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

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;
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

lyricorpse

Thank you very much! Works like a charm.