Как установить фиксированную ширину для текстового поля, на которое не влияет изменяющееся значение отступа влево?

Question

Я хочу поместить изображение в текстовое поле, которое выровнено по левому краю с некоторым отступом влево. Для этого я использую свойства background-image и background-position в CSS. Какое изображение разместить, определяется третьим значением, и изображения имеют разную ширину.

Мое второе требование - текст в текстовом поле должен отображаться после того, как изображение заканчивается с пропуском в 4 пикселя. Из-за разной ширины изображения ширина текстового поля также меняется. я хочу держать его на фиксированной ширине.

Я попытался использовать свойство text-indent вместо padding-left, поставив:

text-indent : 40px;

text-indent помогает мне сохранять фиксированную ширину, но когда я щелкаю в текстовом поле, он показывает курсор в самом начале текстового поля (в 2px).

Как я могу это сделать? Какие свойства CSS я должен использовать?

Answer 1

Я не совсем уверен в том, что вы спрашиваете, но из того, что я могу собрать, звучит так, как будто вам нужно свойство CSS width?

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