CSS: after entering placeholder not working in mozilla

Question

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

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

With CSS, I want to add a magnifying glass icon. This works fine in Chrome, but I want it to work for Firefox too.

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

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

and

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

but for some reason it does not work.

Answer 1

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

Input elements are replaceable elements.

Pseudo-elements , for example :after or :before , will not work on

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

these elements .

Additional Information

Answer 2

Do not try to add an image as content. Use

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

and adjust the background properties to taste.