css - 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> 

这些元素。

更多信息

Answer 2

不要尝试将图像添加为内容。采用

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

并根据口味调整背景属性。