问题
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.
回答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
回答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.
来源：https://stackoverflow.com/questions/12834939/css-after-input-placeholder-not-working-in-mozilla