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

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?

Create a wrapper div for input and image, give relative position to the wrapper div and absolute position to the image — Morpheus, Dec 17 '13 at 13:01

score 56 · Accepted Answer · edited Mar 08 '18 at 22:44

56

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>

edited Mar 08 '18 at 22:44

jpaugh

6,634
4
38
90

answered Dec 17 '13 at 13:08

display-name-is-missing

4,424
5
28
41

4

Added left padding to the input of your example so you could not type over the image -> http://jsfiddle.net/2pbtB/1/ – Morpheus Dec 17 '13 at 13:20
1

`padding-left` works on I.E 8, but as soon as I type a long input, it shifts left and types over the image ! – Francisco Corrales Morales Apr 21 '14 at 17:04
2

Thanks a lot,, it saved my time... – Mohammed mansoor Feb 16 '16 at 08:47

score 7 · Answer 2 · answered Dec 17 '13 at 13:08

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/

score 1 · Answer 3 · answered Dec 17 '13 at 13:11

Just try following:

enter image description here

HTML:

<input type="text" />
<img src='http://jsfiddle.net/img/initializing.png' />

CSS:

input {
    border:1px solid #ddd;
    border-right:none;
    float: left;
}
input:focus {
    outline:none;
}
img {
    float: left;
    height: 18px;
    width: 19px;
    border: 1px solid #ddd;
    border-left: none;
    margin: 2px 0px 0px -2px;
}

fiddle

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

3 Answers3

Linked