Text Input Watermark

[troberts]

Hi
What I'm trying to achieve is a watermark on a search box (text input).
I've got it working fine (it displays an image, onfocus it shows no image) but when the user writes something then clicks somewhere else on the page it goes wrong. It displays the text plus the image (when I wrote the code I didn't think of this). I've tried a few other things but can't figure it out.
PS: I use CSS for the watermark (have tried JS). Any solution greatly appreciated.
CSS:
[CODE=css]input
{
background-image: url('bkg.jpg');
background-repeat: no-repeat;
}
input:focus
{
background-image: url('');
}
input:blur
{
background-image: url('');
}[/CODE]

HTML:
[CODE=html]<input type="text" name="d" size="34">
<button type="submit" onclick="search _form()">Search </button>[/CODE]

Also (I'm doing this for my friend) I've put the page up. (I didn't do the layout!)
The link: http://www.webventures.com.au/search/form.html
Thanks
Tristan

[jhardman]

I'd suggest using straight JS. Place the watermark there to start, but use JS to remove the watermark onFocus and place the watermark (if needed) onChange. Let me know if this helps.

Jared

[nanaveraa]

Hello frnd,
I trying in css, but no result. So I m using in js. Pls try this code
[CODE=JS]
<script type="text/javascript">
function imgfocus(){
document.getEle mentById('ss'). style.opacity=' 0.5';
}
function imgblur(){
document.getEle mentById('ss'). style.opacity=' 100';
}

</script>
<input id="ss" type="submit" onmouseover="im gfocus()" onmouseout="img blur()";
[/CODE]