Put icon inside input element in a form (not as background image!) [closed]

Question

I want to do exactly what was asked here:

Put icon inside input element in a form

Except that I want the icons to be right-aligned.

The "background" workaround won't work, since those images have to be clickable! So it must be an IMG.

How can I do this?

Answer 1

A solution without background-images:

JSFiddle.

#input_container {       position:relative;      padding:0;      margin:0;  }  #input {       height:20px;      margin:0;      padding-left:30px;  }  #input_img {      position:absolute;      bottom:8px;      left:10px;      width:10px;      height:10px;  }

<div id="input_container">      <input type="text" id="input" value>      <img src="https://cdn1.iconfinder.com/data/icons/CornerStone/PNG/arrow%20right.png" id="input_img">  </div>

Answer 2

You can use a div as a wrapper, containing an image and input field, and position the image inside there that overlay's the input field using position absolute.

HTML

<div>     <img src="http://static4.wikia.nocookie.net/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg" alt="">     <input type="text"> </div> 

CSS

div {     height:30px;     width:300px;     position:relative; }  img {     height:15px;     position:absolute;     right:0;     top:5px; }  input {     width:100%; } 

FIDDLE

http://jsfiddle.net/aTvvN/1/