KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
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 */ }
Tags (comma-separated)
Save Edits
Cancel