Text Input Watermark

Question posted by: troberts (Newbie) on April 27th, 2008 07:59 AM

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:

Expand|Select|Wrap|Line Numbers

	input

{

background-image: url('bkg.jpg');

background-repeat: no-repeat;

}

input:focus

{

background-image: url('');

}

input:blur

{

background-image: url('');

}

HTML:

Expand|Select|Wrap|Line Numbers

	<input type="text" name="d" size="34">

<button type="submit" onclick="search_form()">Search</button>

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

Moderator

2,263 Posts

May 14th, 2008
08:20 PM
#2

Re: Text Input Watermark

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

Newbie

9 Posts

May 15th, 2008
01:08 PM
#3

Re: Text Input Watermark

Hello frnd,
I trying in css, but no result. So I m using in js. Pls try this code

Expand|Select|Wrap|Line Numbers

	
<script type="text/javascript">

function imgfocus(){

document.getElementById('ss').style.opacity='0.5';  

}

function imgblur(){

document.getElementById('ss').style.opacity='100';  

}
 
</script>

<input id="ss" type="submit" onmouseover="imgfocus()" onmouseout="imgblur()";

Last edited by eWish : May 15th, 2008 at 02:16 PM. Reason: Fixed code tag

Not the answer you were looking for? Post your question . . .
189,799 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

Latest Articles: Read & Comment

Top HTML / CSS Forum Contributors