1

虫めがねのプレースホルダー アイコンがある 1 つのページで、製品を検索するためのテキスト入力があります。別のページには、バーコード データを受け取るためのテキスト入力があります。

バーコード アイコンをプレースホルダー アイコンとして使用してこれらを区別したいと思いますが、プレースホルダー アイコンは、CSS などで定義されたアイコンではなく、特に Ionicon フォントを使用しているようです。

プレースホルダー アイコンとして使用できるカスタム アイコンを定義する方法はありますか?

次のように定義されたカスタム タブ アイコンがあります。

.tabs .tab-item .icon.gmBagOn {
  background-repeat: no-repeat;
  background-position: 50%;
  height: 70%;
  background-image: url('../img/ic_shop_white_24px.svg');
  background-size: contain;
}

次のようなコードでこれらを参照できます。 <ion-tab title="Lookup" ui-sref="tab.lookup" icon-off="gmSearchOff" icon-on="gmSearchOn">

アイコン名として定義し、次の.icon.barcodeように参照してみました。

<form class="padding" ng-submit="submit(searchUPC)">
   <label class="item item-input">
      <i class="icon ion-barcode"></i>
      <input type="search" placeholder='' ng-model="inputs.textbox">
   </label>
</form>

ただし、これにより空のプレースホルダーが作成されます。また、プレースホルダー アイコンの色を変更しようとしているときに、プレースホルダーのテキストの色またはテキストボックスの塗りつぶしの色を帯びていることがわかりました。これにより、実際にはアイコンの定義ではなくフォントの定義を使用していると思われます。

4

0 に答える 0