Replace Watermark From Google Custom Search Text Box

Here is a method to replace or remove the watermark that is within the Google Custom Search text box using CSS. The default watermark is an image file that reads “Google Custom Search”. In order to replace this, you need to create a new image with the wording of your choice. If you just want to remove the default image altogether, there is no need for a new image.
Replacing the watermark image: Copy and paste the following code into your stylesheet (.css).


.cse input.gsc-input, input.gsc-input {
background-image:url(“YOUR-IMAGE.gif”) !important;
background-repeat:no-repeat;
background-color:#fff;
}

In order for the new image to disappear when the user clicks on the search field, you will need to add this code to your stylesheet (.css) as well.

.cse input.gsc-input:focus, input.gsc-input:focus {
background-image:none !important;
}

If you would just like to remove the default image, disregard the code above and put the following into your stylesheet (.css).

.cse input.gsc-input, input.gsc-input {
background-image:none !important;
}