jQuery Watermark (Place holder)
A watermark typically appears as light text within an input or textarea element whenever the element is empty and does not have focus. This provides a hint to the user as to what the input or textarea element is used for, or the type of input that is required. (Some watermarks such as this one can show the watermark as long as the first character is not entered).
How it works and why this Watermark Plugin is cool?
In this plugin we have the watermark as an actual element, positioned on top of input/or in case your input has no background can be underneath!
<div class='watery'>
<label>Password</label>
<input type='password'></input>
</div>.watery{
margin: 10px;
position: relative;
}
.watery span, label{
cursor: pointer;
position: absolute;
color: #666;
margin: 1px 3px;
}
.watery span.focused,.watery label.focused{ /* style of watermarks on focus */
color: #E8E474;
}
.watery span.filled,.watery label.filled{ /* style of watermarks on filled */
display: none;
}$('#login-box').watermarks( )See working examples and read full doc at jQuery Watermark