title: HTML5 image icon to input placeholder
body: <p>I'd like to add an image icon to an input placeholder, like in this picture:
  <img src="https://i.stack.imgur.com/wpkte.png" alt="enter image description here"></p>
  
  <p>Please note that this is a placeholder, so when the user starts typing, the icon also disappears.</p>
  
  <p>I came with the following solution for webkit (Safari+Chrome) using <code>::-webkit-input-placeholder</code> and <code>::before</code>. Unfortunately, the straightforward application to mozilla seems not to work.</p>
  
  <p>So my question is: <strong>is there a cross-browser solution to add an image icon to an input placeholder?</strong></p>
  
  <p>Solution for webkit:</p>
  
  <pre><code>#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 */
  }
  </code></pre>