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

You don't need the div element, you can assign a background to the input directly.

Edit: Here is the working code. I tested it, but you'll have to adjust it for your needs. As far as I can tell, everything here is needed.

input {
    background: #FFF url(test.png) no-repeat bottom right;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0;
    text-indent:3px;
    margin:0;
    border: none;
    overflow:hidden;
}

Edit2: I'm not quite sure why I'm getting downvoted, but this method should work unless you need an image bigger than the input element itself. In that case, you should use the extra div element. However, if the image is the same size as the input, there is no need for the extra markup.

Edit3: Ok, after bobince pointed out a problem, I'm getting a little closer. This will be work in IE6&7 and it's close in FF, but I'm still working on that part.

input {
    background: #FFF url(test.png) no-repeat 0px 0px;
    background-attachment:fixed;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0px;
    text-indent:3px;
    margin:0;
    border: none;
}
body>input {
    background-position:13px 16px;
}

Edit4: Ok, I think I got it this time, but it requires use of a CSS3 selector, so it won't validate as CSS 2.1.

input { 
    background: #FFF url(test.png) no-repeat 0px 0px;
    background-attachment:fixed;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0px;
    text-indent:3px;
    margin:0;
    border: none;
}
body>input { 
    background-position:13px 16px;
}
body>input:enabled { 
    background-position:9px 10px;
}

body>input will target everything except for IE6, body>input:enabled will target any form elements that aren't disabled for all browsers except for IE 6, 7, & 8. However, because :enabled is a CSS3 selector, it doesn't validate as CSS2.1. I wasn't able to find an appropriate CSS2 selector that would allow me to separate IE7 from the other browsers. If not validating (yet, until the validator switches to CSS3) is a problem for you, then I think your only option is the extra div element.