CSS：输入占位符后不在mozilla中工作

Question

我想在文字输入占位符右侧放置一个小图标，我的占位符文字结束

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

使用CSS我想添加一个放大镜图标。这在Chrome中完美运行，但我也想让它适用于Firefox。

对于Chrome，我使用了::-webkit-input-placeholder:after{content:url('magnifier.jpg');} 我用Firefox试过

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

和

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

但由于某种原因，它不起作用。

Answer 1

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

输入元素是替换元素。

Pseudo-elements，例如:after或:before将不起作用

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

these 元素。

More info

Answer 2

请勿尝试将图片添加为内容。使用

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

并调整背景属性。