Need separate styles for the watermark than for the text box

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Apply the watermark to an input box with this code:

    $("input[name*='someInputBox']").watermark('watermark text', {className: 'watermark'});

2. Add this css style:

.watermark
{
    color: Gray;
    font-size: smaller;
    font-style: italic;
}

3. The text box is too small when it is not focused.  Once focused, it grows to 
the correct size.

What is the expected output? What do you see instead?
The style should be applied only to the watermark--not to the text box.

What version of the product are you using? On what operating system?
v3.0.6

Please provide any additional information below.
Firefox 3.6.8, asp:textbox controls.

Original issue reported on code.google.com by kimball....@gmail.com on 25 Aug 2010 at 1:19

[GoogleCodeExporter]

I'm marking this 'Invalid' not because you're wrong, but because it's the way 
the watermark works.

There are other watermark plugins out there that create a separate DOM element 
and float it over the text box.  Those plugins would not have a problem with 
the text size being different.

However, this plugin specifically does not create a new element and float it 
for many reasons.  Instead, it mimics the native HTML5 placeholder property by 
inserting the text directly into the text box and changing the style.

If you want to shrink the size of the watermark text, yet retain the same size 
text box, it is possible using CSS.  In your .watermark CSS definition, you 
will need to adjust things like height, line-height, etc.  I have done it 
myself, so I know it's possible.  Be sure to test your CSS in multiple browsers 
to be sure it's working properly everywhere.

Original comment by t...@speednet.biz on 27 Aug 2010 at 3:24

• Changed state: Invalid