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 what the best solution for creating this input field is.

One idea I have is to always have a div around the input with a background image and all the borders disabled on the input field and specified width in pixels, such as:

<div class='borderedInput'><input type='text' /></div> 

I have tried to discourage them from using this format, but they won’t be discouraged, so it looks like I’m going to have to do it.

Is this best or is there another way?

—

Trial:

I tried the following:

<style type='text/css'> input.custom {     background-color: #fff;     background:url(/images/input-bkg-w173.gif) no-repeat;     width:173px;     height:28px;     padding:8px 5px 4px 5px;     border:none;     font-size:10px; } </style> <input type='text' class='custom' size='12' /> 

but in IE (6 & 7) it does the following when you type more than the width:

Over Length http://img240.imageshack.us/img240/1417/picture2kp8.png

Answer 1

I’d do it this way:

<style type='text/css'> div.custom {     background:url(/images/input-bkg-w173.gif) no-repeat;     padding:8px 5px 4px 5px; } div.custom input {     background-color: #fff;     border:none;     font-size:10px; } </style> <div class='custom'><input type='text' class='custom' size='12' /></div> 

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( '<div class='custom'></div>' ); 

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:

<input class='custom' ... />