HTML5 image icon to input placeholder

Question

I d like to add an image icon to an input placeholder  like in this picture    Please note that this is a placeholder  so when the user starts typing  the icon also disappears   I came with the following solution for webkit  Safari Chrome  using   -webkit-input-placeholder and   before  Unfortunately  the straightforward application to mozilla seems not to work   So my question is  is there a cross-browser solution to add an image icon to an input placeholder   Solution for webkit    myinput  -webkit-input-placeholder  before        content           position  absolute      top  2px     adjust icon position        left  0px      width  14px     size of a single icon        height  14px      background-image  url   path to icons png       all icons in a single file        background-repeat  no-repeat      background-position  -48px 0px     position of the right icon

User · Answer

Adding to Tim s answer      search placeholder-shown           show background image  I like svg          when using svg  do not use HEX for colour  you can use rbg a instead         also notice the single quotes      background-image url  data image svg xml  utf8   lt svg gt      lt g fill  grey     lt  svg gt            other background props           search not  placeholder-shown    background-image  none

User · Answer

I don t know whether there s a better answer out there as time goes by but this is simple and it works   input type  email       background  white url images mail svg  no-repeat     input type  email   focus     background-image  none      Style it up to suit

User · Answer

lt html gt   lt head gt   lt style gt   input type text        width  50       box-sizing  border-box      border  2px solid  ccc      border-radius  4px      font-size  16px      background-color  white      background-image  url  searchicon png        background-position  10px 10px       background-repeat  no-repeat      padding  12px 20px 12px 40px     lt  style gt   lt  head gt   lt body gt    lt p gt Input with icon  lt  p gt    lt form gt     lt input type  text  name  search  placeholder  Search    gt   lt  form gt    lt  body gt   lt  html gt

User · Answer

You can set it as background-image and use text-indent or a padding to shift the text to the right  You can break it up into two elements   Honestly  I would avoid usage of HTML5 CSS3 without a good fallback  There are just too many people using old browsers that don t support all the new fancy stuff  It will take a while before we can drop the fallback  unfortunately    The first method I mentioned is the safest and easiest  Both ways requires Javascript to hide the icon  CSS  input search       background-image  url bg jpg       background-repeat  no-repeat      text-indent  20px     HTML    lt input type  quot text quot  id  quot search quot  name  quot search quot  onchange  quot hideIcon this   quot  value  quot search quot    gt    Javascript  function hideIcon self        self style backgroundImage    none       September 25h  2013 I can t believe I said  quot Both ways requires JavaScript to hide the icon  quot   because this is not entirely true  The most common timing to hide placeholder text is on change  as suggested in this answer  For icons however it s okay to hide them on focus which can be done in CSS with the active pseudo-class    search active   background-image  none     Heck  using CSS3 you can make it fade away  http   jsfiddle net 2tTxE   November 5th  2013 Of course  there s the CSS3   before pseudo-elements too  Beware of browser support though              Chrome  Firefox     IE      Opera   Safari  before      yes    1 0         8 0     4       4 0   before     yes    1 5         9 0     7       4 0  https   developer mozilla org en-US docs Web CSS   before

User · Answer

CSS   input search   background-image  url bg jpg    background-repeat  no-repeat   text-indent  20px     input search focus   background-image none      HTML    lt input type  text  id  search  name  search  value  search    gt

[css] HTML5 image icon to input placeholder

Examples related to css

Examples related to html

Examples related to cross-browser

Examples related to placeholder