Put icon inside input element in a form

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" />