What HTML/CSS would you use to create a text input with a background?

Question

I have a website design that includes text input fields that look like this:

Input Field http://img401.imageshack.us/img401/4453/picture1ts2.png

I\'m wondering w

Answer 1

I'd do it this way:

You just have to adjust the padding values so everything fits correctly. It is - in my eyes- definitely the best solution since in any other case you're working with a whole input field. And the whole input field is - by definition - a box where users can enter text.

If you can rely on JavaScript you could wrap such div-Elements around your input fields programatically.

Edit: With jQuery you could do it this way:

$( 'input.custom' ).wrap( '
' );

CSS:

div.custom {
    background:url(/images/input-bkg-w173.gif) no-repeat;
    padding:8px 5px 4px 5px;
}
input.custom {
    background-color: #fff;
    border:none;
    font-size:10px;
}

And your HTML: