Put icon inside input element in a form

Question

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

Answer 1

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

CSS:

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

HTML:

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

Answer 2

.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

add above tags into your CSS file and use the specified class.

Answer 3

I didn't want to change the background of my input text neither it will work with my SVG icon.

What i did is adding negative margin to the icon so it appear inside the input box

and adding same value padding to the input so text won't go under the icon.

<div class="search-input-container">

  <input
    type="text"
    class="search-input"
    style="padding-right : 30px;"
  />

  <img 
    src="@/assets/search-icon.svg" 
    style="margin-left: -30px;"
   />

</div>

*inline-style is for readability consider using classes

Answer 4

Just use the background property in your CSS.

<input id="foo" type="text" />

#foo
{
    background: url(/img/foo.png);
}

Answer 5

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;

Answer 6

You can try this:

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