John Smith John Smith - 5 months ago 29
CSS Question

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

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

A solution without background-images:

JSFiddle.

HTML

<div id="input_container">
    <input type="text" id="input" value>
    <img src="URL" id="input_img">
</div>

CSS

#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; }