CSS :after input placeholder not working in mozilla

1
votes

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.

2
cssplaceholder
stackoverflow.com/a/24076889/607874 might be useful to you - Jose Rui Santos

2 Answers

4
votes

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

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

2
votes

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.