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

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

Have you evaluated using background image like this:

<style type="text/css"> 
  input{ 
  background-color: #AAAAAA; 
  background-image: url('http://mysite.com/input.gif'); 
  border: 0px; 
  font-family: verdana; 
  font-size: 10px; 
  color: #0000FF; 
}