Put icon inside input element in a form

Question

How do I put an icon inside a form's input element?

Live version at: Tidal Force theme

Solution 1

The site you linked uses a combination of CSS tricks to pull this off. First, it uses a background-image for the <input> element. Then, in order to push the cursor over, it uses padding-left.

In other words, they have these two CSS rules:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

Solution 2

The CSS solutions posted by others are the best way to accomplish this.

If that should give you any problems (read IE6), you can also use a borderless input inside of a div.

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

Not as "clean", but should work on older browsers.

Solution 3

A solution without background-images:

.icon {
  padding-left: 25px;
  background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat left;
  background-size: 20px;
}

<input type="text" class="icon" value placeholder="Search">

Or for right to left icon

.icon-rtl {
  padding-right: 25px;
  background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat right;
  background-size: 20px;
}

<input type="text" class="icon-rtl" value placeholder="Search">

Solution 4

You can try this:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}

Solution 5

I find this the best and cleanest solution to it. Using text-indent on the input element:

#icon {
  background-image: url(../images/icons/dollar.png);
  background-repeat: no-repeat;
  background-position: 2px 3px;
}

<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />

View more solutions

Comments

[Ross]

a good addition to this answer. sometimes ie gives problems and this is a good way to solve one of them. worked for me albeit with a span instead.

[QMaster]

Could you please describe more about top and left parameters (7px 7 px) and other attributes? That is must be helpful.

[Francisco Corrales Morales]

the padding-left is being ignored by Internet Explorer 8. Well not really ignored, but as soon as I type a long input, the input begins to appear in front of the icon.

[a coder]

Advice: stop using and supporting IE 8.

[ishanbakshi]

how can I align the image to the right end of the input field?

[Cătălin Rădoi]

The problem with background images is that Chrome's autofill removes the background image and makes the background yellow completely

[Kostiantyn]

I'm supporting text-indent because padding-left will increase field's width and it'll overflow out of the parent element.

[heroxav]

Nice way to add more complex structures inside inputs!

[harpo]

@jonhue, I wouldn't recommend this unless you're still living in the previous decade and need to support IE6. Even then, I wouldn't call it "clean."

[heroxav]

@harpo How would you include links inside inputs then?

[Wylliam Judd]

why did you put the style inline instead of in the #icon css?

[Rusty]

@WylliamJudd That is just for demonstration purpose :)

[Vyshnia]

Seems that ::before can not be applied of input element.

[ejntaylor]

To align to the right use: background-position: right;

[neptune]

the image disappear when autocompleting on chrome

[user460114]

How do you make the image clickable, e.g. if using a "save" icon?

[Arjun]

do you know how to set click event only for this image.?

[borbulon]

This is super old and I hope maybe you've learned since over a year ago, but background is a shorthand property name which you use to cover all the background properties at once: background: [color] [image url] [repeat] [position], and that's why your color was overwriting everything. You could also have left it in place and renamed the property to background-color

[fantja]

@borbulon yes you are right. it's almost always best to use shorthand property name, totally agree on that. But purpose of this post is to point out that order of properties sometimes matters, and those 'small' CSS rules can be frustrating a lot, especially to newcomers in development.

[shivam srivastava]

It worked for me for my hybrid app, I just made the whole input box clickable after inserting image.

[Mario Werner]

Clean and simple, yes. You should also remove the input border with input { border: none; } and add the border to #input-container { border: 1px solid #000; } to make it look like the image is inside and actually part of the input.

[The Fool]

@MarioWerner he pushed the image inside the input, no need to do border hacks, that's the beauty. I am going to use the idea.

[borbulon]

Totally agree, but the point still stands: background is a shorthand property name. A better fix would have been to not use the shorthand, but use background-color for the color property (assuming you want both a color and an image).

[majid savalanpour]

why did you use id instead of class?

[G0BLiN]

A minor issue with this - the image is positioned over (z axis) the input, so it blocks clicks over it from focusing on the input (this can be observed in the snippet). It's possible to resolve by sending the image under the input

[d0rf47]

This is an excellent comprehensive answer! saved me much time thank you for this

[Jasur Kurbanov]

can I use your code both for personal and commercial projects ?

[Sheldon Oliveira]

to add it on the right with some space background-position: center; background-position-x: calc(100% - 12px);

[Tiago Rangel de Sousa]

Not buttons, inputs.

[Tiago Rangel de Sousa]

Good solution, but please add an explanation for your solution.

[Tiago Rangel de Sousa]

Good solution, but please add an explanation for your solution.

[yazabara]

I don't remember it now =) I've lost UI experience ... 2015...backend only..)

[CHANist]

seems this css works only on non-input element, like div.