Изображение внутри html.textboxfor

Есть несколько способов сделать это.

1- - создать иллюзию наличия изображения во входном текстовом поле.

2- путь должен иметь фон для поля ввода.

Способ 1:

Возьмем следующий пример:

JS-FIDDLE-DMEO

HTML:

<div class="some-input-parent" style="border: 1px solid #DDD;">

      <input class="some-input" style="border: none; "/>   
      <img class="some-input-img"  src="yourImage.png"/>   

</div>

CSS:

.some-input{
width:120px;
}
.some-input-img{
width:15px;
}

.some-input-parent{
  width:140px;
 }

Хитрость состоит в том, чтобы иметь div или span который содержит поле ввода, и что div будет иметь изображение, также выровненное либо вправо, либо влево (в зависимости от ваших потребностей).

Ширина пролета будет равна ширине текстового поля + ширина изображения + дополнительное пространство для границ, отступы и т.д.

---

---

Способ 2:

Когда вы установите фон, нажмите его вправо, указав его положение. Затем добавьте дополнение к полю ввода, чтобы придать ему внешнюю ширину, чтобы мы не перекрывали текст от изображения.

JS-FIDDLE-DEMO2

HTML:

<input class="real-input" type="text" />

CSS:

.real-input
{
    background-image: url(youIcon.png");
    background-position: 119px 0;
    background-repeat: no-repeat;
    background-size: 17px auto;
    padding-right: 26px;
    width: 111px;
}

Результат: