[html] 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

This works for me for more or less standard forms:

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>

You Can Try this : Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec

<div class="container">
            <form>
                <div class="row">
                    <div class="input-group mb-3 col-sm-6">
                      <input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        <div class="input-group-prepend bg-white">
                            <span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>

??

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.

use this css class for your input at start, then customize accordingly:

    _x000D_
 .inp-icon{_x000D_
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;_x000D_
background-size: 16px;_x000D_
 }

<input class="inp-icon" type="text">

A simple and easy way to position an Icon inside of an input is to use the position CSS property as shown in the code below. Note: I have simplified the code for clarity purposes.

1. Create the container surrounding the input and icon.
2. Set the container position as relative
3. Set the icon as position absolute. This will position the icon relative to the surrounding container.
4. Use either top, left, bottom, right to position the icon in the container.
5. Set the padding inside the input so the text does not overlap the icon.

#input-container {_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
#input-container > img {_x000D_
  position: absolute;_x000D_
  top: 12px;_x000D_
  left: 15px;_x000D_
}_x000D_
_x000D_
#input-container > input {_x000D_
  padding-left: 40px;_x000D_
}

<div id="input-container">_x000D_
  <img/>_x000D_
  <input/>_x000D_
</div>

I had situation like this. It didn't work because of background: #ebebeb;. I wanted to put background on the input field and that property was constantly showing up on the top of the background image, and i couldn't see the image! So, I moved the background property to be above the background-image property and it worked.

input[type='text'] {
    border: 0;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
    background: #ebebeb;
}

Solution for my case was:

input[type='text'] {
    border: 0;
    background: #ebebeb;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
}

Just to mention, border, padding and text-align properties are not important for the solution. I just replicated my original code.

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

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

This works for me:

input.valid {_x000D_
   border-color: #28a745;_x000D_
   padding-right: 30px;_x000D_
   background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');_x000D_
   background-repeat: no-repeat;_x000D_
   background-size: 20px 20px;_x000D_
   background-position: right center;_x000D_
}

<form>_x000D_
<label for="name">Name</label>_x000D_
<input class="valid" type="text" name="name" />_x000D_
</form>

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

A solution without background-images:

#input_container {_x000D_
    position:relative;_x000D_
    padding:0 0 0 20px;_x000D_
    margin:0 20px;_x000D_
    background:#ddd;_x000D_
    direction: rtl;_x000D_
    width: 200px;_x000D_
}_x000D_
#input {_x000D_
    height:20px;_x000D_
    margin:0;_x000D_
    padding-right: 30px;_x000D_
    width: 100%;_x000D_
}_x000D_
#input_img {_x000D_
    position:absolute;_x000D_
    bottom:2px;_x000D_
    right:5px;_x000D_
    width:24px;_x000D_
    height:24px;_x000D_
}

<div id="input_container">_x000D_
    <input type="text" id="input" value>_x000D_
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">_x000D_
</div>

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

Just use the background property in your CSS.

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

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

I achieved this with the code below.

First, you flex the container which makes the input and the icon be on the same line. Aligning items makes them be on the same level.

Then, make the input take up 100% of the width regardless. Give the icon absolute positioning which allows it to overlap with the input.

Then add right padding to the input so the text typed in doesn't get to the icon. And finally use the right css property to give the icon some space from the edge of the input.

Note: The Icon tag could be a real icon if you are working with ReactJs or a placeholder for any other way you work with icons in your project.

.inputContainer {
  display: flex;
  align-items: center;
  position: relative;
}

.input {
  width: 100%;
  padding-right: 40px;
}

.inputIcon {
  position: absolute;
  right: 10px;
}

<div class="inputContainer">
   <input class="input" />
   <Icon class="inputIcon" />
 </div>

Using with font-icon

<input name="foo" type="text" placeholder="&#61447;">

OR

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

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}

 <label for="fileEdit">
    <i class="fa fa-cloud-upload">
    </i>
    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
  </label>

For example you can use this : label with hidden input (icon is present).

You can try this:

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