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