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

User · Accepted Answer

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;

User · Answer

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   lt input id  quot icon quot  style  quot text-indent 17px  quot  type  quot text quot  placeholder  quot Username quot    gt

User · Answer

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   lt div class  quot search-input-container quot  gt      lt input     type  quot text quot      class  quot search-input quot      style  quot padding-right   30px  quot      gt      lt img      src  quot   assets search-icon svg quot       style  quot margin-left  -30px  quot       gt    lt  div gt    inline-style is for readability consider using classes

User · Answer

This works for me for more or less standard forms      lt button type  submit  value  Submit  name  ButtonType  id  whateveristheId  class  button-class  gt Submit lt img src   img selectedImage png  alt    gt  lt  button gt

User · Answer

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

User · Answer

You Can Try this   Bootstrap-4 Beta     https   www codeply com go W25zyByhec   lt div class  container  gt               lt form gt                   lt div class  row  gt                       lt div class  input-group mb-3 col-sm-6  gt                         lt input type  text  class  form-control border-right-0  placeholder  Username  aria-label  Username  aria-describedby  basic-addon1  gt                           lt div class  input-group-prepend bg-white  gt                               lt span class  input-group-text border-left-0 rounded-right bg-white  id  basic-addon1  gt  lt i class  fas fa-search  gt  lt  i gt  lt  span gt                           lt  div gt                       lt  div gt                   lt  div gt               lt  form gt           lt  div gt

User · Answer

This works for me    x000D   x000D  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    x000D   lt form gt  x000D   lt label for  name  gt Name lt  label gt  x000D   lt input class  valid  type  text  name  name    gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

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    Create the container surrounding the input and icon  Set the container position as relative Set the icon as position absolute  This will position the icon relative to the surrounding container  Use either top  left  bottom  right to position the icon in the container  Set the padding inside the input so the text does not overlap the icon     x000D   x000D   input-container   x000D    position  relative  x000D    x000D   x000D   input-container  gt  img   x000D    position  absolute  x000D    top  12px  x000D    left  15px  x000D    x000D   x000D   input-container  gt  input   x000D    padding-left  40px  x000D    x000D   lt div id  input-container  gt  x000D     lt img  gt  x000D     lt input  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can try this   input type  text         background-image  url images comment-author gif       background-position  7px 7px      background-repeat  no-repeat

User · Answer

use this css class for your input at start  then customize accordingly    x000D   x000D       x000D    inp-icon  x000D  background  url https   i imgur com kSROoEB png no-repeat 100   x000D  background-size  16px  x000D     x000D   lt input class  inp-icon  type  text  gt  x000D   x000D   x000D

User · Answer

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   x000D   x000D   inputContainer     display  flex    align-items  center    position  relative      input     width  100     padding-right  40px      inputIcon     position  absolute    right  10px    x000D   lt div class  inputContainer  gt      lt input class  input    gt      lt Icon class  inputIcon    gt    lt  div gt  x000D   x000D   x000D

User · Answer

A solution without background-images    x000D   x000D   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    x000D   lt div id  input container  gt  x000D       lt input type  text  id  input  value gt  x000D       lt img src  https   cdn4 iconfinder com data icons 36-slim-icons 87 calender png  id  input img  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Using with font-icon   lt input name  foo  type  text  placeholder   amp  61447   gt    OR   lt input id  foo  type  text    gt    foo  before     font-family   FontAwesome     color red    position  relative    left  -5px    content    f007

User · Answer

icon  background  url 1 jpg  no-repeat  padding-left 25px      add above tags into your CSS file and use the specified class

User · Answer

Just use the background property in your CSS    lt input id  foo  type  text    gt    foo       background  url  img foo png

User · Answer

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    lt div style  border  1px solid  DDD   gt       lt img src  icon png   gt       lt input style  border  none    gt   lt  div gt    Not as  clean   but should work on older browsers

User · Answer

lt label for  fileEdit  gt       lt i class  fa fa-cloud-upload  gt       lt  i gt       lt input id  fileEdit  class  hidden  type  file  name  addImg  ng-file-change  onImageChange   files    ng-multiple  false  accept     contentType      gt     lt  label gt    For example you can use this   label with hidden input  icon is present

[html] Put icon inside input element in a form

Examples related to html

Examples related to css

Examples related to forms

Examples related to input

Examples related to icons