One of the cool tricks that I use frequently in my website designs is to make the labels of text input boxes in my HTML form appear to be on top of the input box itself then disappear when you click on it.
In the past I’ve tried achieving this by using labels and hovering them over the box, then making it display:none when you click on it.
The problem with this is that you either end up having to use a jQuery plugin to handle it or lots of extra code.
Recently I came across a method to have placeholder text disappear when you click on a text input box with very little code.
You’ll need jQuery installed, if you don’t know what that is you probably shouldn’t be doing this anyway.. let’s get stuck in.
First you setup your input box:
<input type="text" title="This is my placeholder text" class="usewatermark" />
Next, put this bit of jQuery code after your form:
Styling your watermark
You can then use the “watermark” CSS class to style your placeholder text however you like.
I usually grey it out a bit and maybe make it italic or something along those lines.
Nice and simple and it uses very little code!