Place an image inside a text field

HTML

<div class="fake-input">
    <input type="text" />
    <img src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=25 />
</div>

CSS

.fake-input { position: relative; width:240px; }
.fake-input input { border:none; background-color:#fff; display:block; width: 100%; box-sizing: border-box }
.fake-input img { position: absolute; top: 2px; right: 5px }

Working demo

http://jsfiddle.net/HnJZa/


try this:

input { 
  background-image: url("icon.png");
  background-position: right top;
  background-repeat: no-repeat;
  background-size: contain;
}

Tags:

Html

Css

Image