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

The easiest way to get rid of the overflow without JavaScript is simple:

1. Create a 3 spans, and set their heights to the height of the image.
2. Cut the image into 3 parts, ensuring you cut the image such that the left and right round parts will be on the 1st and 3rd images respectively.
3. Set the background of the 1st span to the image with the left border, and set it to no-repeat.
4. Set the background of the third span to the image with the right border and set it to no-repeat.
5. Put the input inside the middle span, remembering to set its height to the height of the spans, and its background to the 2nd image, and repeat-x only.
6. That will ensure that the input will seem to expand horizontally once the input is being filled. No overlapping, and no JS needed.

HTML Assuming the image height is 60px, the width of the first and third span is 30px,

nbsp;



nbsp;

CSS

span#first{background:url('firstimage') no-repeat; height:60px; width:30px;}
span#third{background:url('thirdimage') no-repeat; height:60px; width:30px;}
span#second input{background:url('second image') repeat-x; height:60px;}

That should resolve your issue.