CSS :after input placeholder not working in mozilla

Question

I want to put a small icon in my text input placeholder right where my placeholder text ends

<input type="text" placeholder="Search  ">

With CSS I want to add a magnifier icon. This works perfectly in Chrome, but I want to make it work for Firefox as well.

For Chrome I used ::-webkit-input-placeholder:after{content:url('magnifier.jpg');} And with Firefox I've tried

input:-moz-placeholder:after{content:url('magnifier.jpg');}

and

input:-moz-placeholder::after{content:url('magnifier.jpg');}

but for some reason it's not working.

Answer 1

.......................

Input elements are replaced elements.

Pseudo-elements, such as :after or :before will not work on

 <button>, <textarea>, <input>,  <select>, <img>, <object> 

these elements.

More info

Answer 2

Don't try to add the image as content. Use

input:-moz-placeholder { background: url('magnifier.jpg') right center no-repeat }

and tweak the background properties to taste.