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 */
}
See Question&Answers more detail:os