1

テキスト入力プレースホルダーのプレースホルダー テキストが終了する位置に小さなアイコンを配置したい 

<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');}

しかし、何らかの理由で機能していません。

4

2 に答える 2

4

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

入力要素は置換要素です。

Pseudo-elements、:after または:before動作しません

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

これらの要素。

より詳しい情報

于 2012-10-11T08:12:22.370 に答える
2

画像をコンテンツとして追加しようとしないでください。使用する

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

背景のプロパティを好みに合わせて微調整します。

于 2012-10-11T08:10:43.853 に答える