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 } 

並調整背景屬性來品嚐。