CustomSearch Box

[adobe71]

I want to create custom search box like Google.
I want to place the image inside the textbox and
when user click on textbox the image on textbox
must disappear.How it is possible.

[sergb]

The only way that I know to put an image inside a plain textbox is to set the image as the background of the textbox. Then you can handle the focus event on the textbox and remove the background image. You can also handle the blur event to put the image back, if necessary.

Here is some code (I hope I remember the property names correctly):

<input type="text" style="background-image: url(path/to/your/image.jpg);"
onfocus="delBgImage(this);" onblur="setBgImage(this, '/path/to/your/image.jpg');" />

<script type="text/javascript">
function delBgImage(textbox) {
    if (textbox.style)
        textbox.style.backgroundImage = "";
}
function setBgImage(textbox, image) {
    // Only set the image if textbox is empty.
    if (textbox.value != "")
        return;
    if (textbox.style)
        textbox.style.backgroundImage = image;
}
</script>