Question

I want to place an image in a textbox which is left aligned with some padding-left value. For that i am using background-image and background-position properties in CSS.
Which image to place, is decided by a third value and the images are of different width.

My second requirement is the text in the textbox should be displayed after the image ends with a gap of 4px.
Because of varying image width the textbox width is also varying. i want to keep it at a fixed width.

I tried using text-indent property instead of padding-left by putting :

text-indent : 40px;

text-indent helps me keeping width fixed but when i click in the textbox it shows cursor at very start of the textbox(at 2px).

How can i do it? Which CSS properties should i use?

Answer 1

I’m not completely sure of what your asking but from what I can gather it sounds like you need with CSS width property?

.myInput
{
   background: white url(images/smiley.png) center left no-repeat;
   padding-left:18px;
   width: 120px; /* Fixed outside bounds width of the text input*/
}