картинка в input

[DivMan]

Как сделать так, что бы текст начинал печататься внутри рамки, а не впритык?

http://jsfiddle.net/Su5Pa/

 

[Kublyakov]

Добавьте padding-left для инпута.

[Светлана Г.]

Вот:

 

.input2{

padding:0 10px;

width:314px;

}

[DivMan]

Вот:

 

.input2{

padding:0 10px;

width:314px;

}

а зачем width изменили?

[Kublyakov]

 

Вот:

 

.input2{

padding:0 10px;

width:314px;

}

а зачем width изменили?

 

Потому что ширина элемента складывается как padding+border+margin+width

Если дописали падинги слева и справа по 10 пикселей, то width нужно уменьшить на 20 пикселей и тогда ширина элемента останется первоначальной)

[Светлана Г.]

 

Вот:

 

.input2{

padding:0 10px;

width:314px;

}

а зачем width изменили?

 

Потому что общая ширина увеличится, и текст вылезет за пределы картинки.

 

Вот это правило исправит ситуацию и ширину не нужно будет менять:

 

box-sizing:border-box;

http://jsfiddle.net/Su5Pa/3/

 

Это для современных браузеров.

Edited May 6, 2014 by Светлана Г.