how to create a textbox watermark using css or javascript

How to create a textbox watermark using css or javascript , we have lot of ways to do this. Here i am going to explain some simple tricks to create a textbox watermark on html. One is based on inline JavaScript and the other is simple css trick.

Method 1 : JavaScript based

This method based on simple JavaScript snippet
The output of this method is shown in below images
how to create a textbox watermark on html :Before Clickhow to create a textbox watermark on html:After Click

<input type="text" onblur="if (this.value == '') {this.value = 'Search …';}" onfocus="if (this.value == 'Search …') {this.value = '';}" name="s" value="Search …">
 

Method 2:  Css Place Holder

Place holder technique is a css3 method to implement watermarking in input fields. the value of the parameter placeholder will displayed as watermark

Eg code:

<input type="text" placeholder="Name" value="" />

it will also looks like same as the above. Place holder is  a css3+html5 addition. Now most of the browsers supports css3 and html5 so the use of place holder is most preferred.

Also the default color and style of the place holder may not look good with our design. Then it also need to be styled. Click here to know how to style placeholders

Method 3: Background Image

In this method create an image with desired text in it. Then set it as the background-image for the text box
below shows how to set the background image for textboxes

inupt[type="text"]{
background-image:url("images/name_bg.png");
}

if you need to style password box like this just replace the input[type=”text”] with input[type=”password”]