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

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

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

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

text-indent : 40px;

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

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


html padding css background-image textbox
person Vinay    schedule 24.06.2011    source источник
comment
Если бы вы могли предоставить HTML и CSS, которые у вас уже есть, через jsfiddle.net, сообщество SO сможет помочь вам более эффективным способом. Снимки экрана того, что у вас есть и чего вы хотите, также будут полезны.   -  person Dan    schedule 24.06.2011

Ответы (1)


arrow_upward
0
arrow_downward

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

.myInput
{
   background: white url(images/smiley.png) center left no-repeat;
   padding-left:18px;
   width: 120px; /* Fixed outside bounds width of the text input*/
}
person Craig White    schedule 24.06.2011
comment
раньше я использовал атрибут размера, но у меня это не сработало. но ширина свойства CSS работает нормально..!! Спасибо.. - person Vinay; 24.06.2011