Underlining Text in an <input> Box

Question

I've gotten a request from a client to underline text in a text field. Both single and double lines.

Is this even possible? I assume with some obscure plugin but I haven't found it yet. :P

I've thought about there being 2 possibilities, if this is possible.

1) Underlining the text in the actual field. 2) Doing some crazy hack with text just underneath the text field.

Thanks for any help and/or commentary. ^_^

Answer 1

The following works in Chrome 6.0.472.55/Ubuntu 10.04, and Firefox 3.6.9 (also Ubuntu 10.04):

input {text-decoration: underline; }

Though this, obviously, gives only a single-underline.

Quick demo at: jsbin

Answer 2

You could just use a CSS based solution i.e. a CSS selector to underline the text.