cnankivel Posted February 11, 2021 Share Posted February 11, 2021 Site URL: https://charlesnankivel.com/proprental Hello! I have a question about changing the color of my search bar. I have found all sorts of answers regarding code for changing the color of the frame, drop down boxes, and the text as you're typing, but I haven't been able to find anything about changing the color of the word "Search" that is in the search bar. As you can see, it is a very washed out grey that is hard to read especially on mobile devices. Once you start typing, however, the text is white. How do I change the color of the word "search" to white so that it is more easily visible on my site? And while we are on the subject of the search bar, is there a way to limit the results of my search bar? I currently only see options to "Search one page" and "Search every page." I would love to find a way to limit my search results to a few pages within my prop rental category, but exclude all the other pages in my portfolio. Is there a custom code for that? Additionally, I am using the Avenue template if that is relevant at all. Thanks! Link to comment
dvgdvgdvg Posted February 12, 2021 Share Posted February 12, 2021 (edited) Re: your main question of how to change the color of the placeholder "Search" text, try this in your custom CSS (it requires multiple settings for different browsers): ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #ffffff; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #ffffff; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #ffffff; } Source: https://www.w3schools.com/howto/howto_css_placeholder.asp Edited February 12, 2021 by dvgdvgdvg cnankivel 1 Link to comment
cnankivel Posted February 12, 2021 Author Share Posted February 12, 2021 3 hours ago, dvgdvgdvg said: Re: your main question of how to change the color of the placeholder "Search" text, try this in your custom CSS (it requires multiple settings for different browsers): ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #ffffff; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #ffffff; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #ffffff; } Source: https://www.w3schools.com/howto/howto_css_placeholder.asp This is perfect! I didn't realize it would differ between web browsers. Thank you so much! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment