‘Search’ Text not disappearing

If it helps, here is a picture of the issue. I really could use some help with this please.

View post on imgur.com

Thanks!

Hello,

In what browser this happens? In Chrome, when I start to type something, the default “Search” disappears.

Thanks for responding! The issue isn’t that it disappears when you start typing something (which it does), it’s that I’d like the word ‘Search’ to disappear right when you first click in the box, not just when you start typing. I have this issue when using Safari, Chrome and Firefox.

Thanks!

I guess I’m hoping there might be something I could add to the ‘Additional CSS’ to fix this (I say fix because it seems that it would be normal behavior to have the word disappear when the Search Box is clicked; all other sites I’ve seen are like that). Even if the fix is more involved I’d still very much like to know if possible. Thanks!

Just add the following CSS code in the Customizer > Additional CSS and the text will disappear when clicking the input:

#search input:focus::-webkit-input-placeholder { color: transparent; }
#search input:focus:-moz-placeholder { color: transparent; } /* FF 4-18 */
#search input:focus::-moz-placeholder { color: transparent; } /* FF 19+ */
#search input:focus:-ms-input-placeholder { color: transparent; } /* IE 10+ */

Thank you! The only problem I’m having with this now is that I had to delete the CSS code that changed the color of the word ‘Search’. Is there a way to keep both?

This is the code I had to delete:

/* Change color of search box placeholder attribute for all browsers */
#searchform #s::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #f2f2f2 !important;
}
#searchform #s:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f2f2f2 !important;
opacity: 1;
}
#searchform #s::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f2f2f2 !important;
opacity: 1;
}
#searchform #s:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #f2f2f2 !important;
}
#searchform #s::-ms-input-placeholder { /* Microsoft Edge */
color: #f2f2f2 !important;
}

Is it possible to integrate both changes?

Hello, thanks again for the help before. I’m still wondering about color for the word ‘Search’ and how to change it for all browsers. Any assistance would be very much appreciated, thanks!