Put Icon Inside Input Element in a Form (Not as Background Image!)

Put icon inside input element in a form

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;

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

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>

Putting a image inside a input box

Try this:

background: url(images/icon.png) no-repeat right center;

The explanation for this CSS is as follows:

background: [url to image] [don't repeat] [horizontal position] [vertical position]

How to put icon inside an input box

A little bit of CSS should do the trick here.

Either add the following code snippet to a stylesheet or to a style block. Alternatively, you could apply the styles inline, directly on the HTML elements themselves.

CSS:

.test {
  position: relative;
}

.test .fas.fa-check {
  position: absolute;
  top: 0;
  right: 0;
}

UPDATE

If the form contains multiple select boxes in the same row, then they must be wrapped in a div which has relative positioning and inline display.

How to insert icon inside input tag

Well you can use position absolute to position the icon over the input.

You might need to change the top value a little bit and the padding-right value. Check the comment inside the snippet below

.input-group {
  position:relative;
  display:inline-block;
}
.input-group-text {
  position: absolute;
  right:0;
  top: 0;
}

input {
  padding-right: 20px; /* = icon width if you don't want the password to go under the icon */ 
  }

<div class="input-group">
   <input id="password" type="password" class="form-login" />
   <div class="input-group-append">
     <span class="input-group-text">
       <i class="fas fa-eye" id="show_eye">icon</i>

     </span>
   </div>

 </div>

How do i insert an image inside an input tag

Here's the HTML for the text box:

<input type="text" name="whatever" id="funkystyling" />

Here's the CSS for the image on the left:

#funkystyling {

    background: white url(/path/to/icon.png) left no-repeat;
    padding-left: 17px;
}

And here's the CSS for the image on the right:

#funkystyling {
    background: white url(/path/to/icon.png) right no-repeat;
    padding-right: 17px;
}

icons gone in text field when form auto filled

OK, This problem happens because the browser auto-filling changes the background color to yellow and I think there are no way to override this auto-filling because you use background-image, we just can override the background-color like that:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

But we have some things to do :

1- you can use autocomplete="off" to prevent auto complete and we can avoid this problem.

2- you can give the background image to another element like using :before for the div which contain the input element, I made demo for this solution and you can see it here : https://jsfiddle.net/IA7medd/obc68xhw/

HTML:

<div class="inputContainer">
  <input type="text">
</div>

and the style :

input[type=text] {
 width: 200px;
 height: 25px;
 padding: 0;
 border: solid 1px;
 background:white;
 padding-left: 25px;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

.inputContainer{
  display:inline-block;
  position:relative;
}

.inputContainer:before{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  top:3px;
  left:5px;
  background: url(https://image.freepik.com/free-icon/male-user-shadow_318-34042.png) no-repeat;
  background-size: 20px 20px;
}