HTML5 image icon to input placeholder

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 */
}