Question

I have a made a custom search box for google custom search. In order of the branding terms I need to have a watermark in the search box. I have tried to use the onFocus attribute in html but this is the wrong approach for me. I want the same style as this Example.

When I try to use the onFocus it only “apply” once. So if i higlight the input box the custom search image disseaper, but when i click on another element the image stay disseapered and does not return.

I have also tried to use the following script below, but that only gives me a input box inside my alleredy custom search box.

<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>

How can i make a same effect that google custom search ?

Answer 1

You should be able to just create a CSS class or you could include an inline style with the background-image: property and assign it to the <input> tag. Try something like this…

.InputFieldBkgd
{
    background-image: url(images/imageName.png);
    background-repeat: no-repeat;
}

when you fire off your onFocus event, you can remove this class and assign a different class that does not have a background-image property. then onBlur assign the original class to add the image back.