Question

我有一个文本输入，用于在一个页面上使用放大镜占位符图标搜索产品。在另一个页面上，我有专门用于接收条形码数据的文本输入。

我想通过使用条形码图标作为占位符图标来区分这些，但占位符图标似乎是专门使用Ionicon字体而不是CSS或其他内容定义的图标。

有没有办法定义可用作占位符图标的自定义图标？

我有如下定义的自定义标签图标：

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

然而，这会创建一个空的占位符。此外，在尝试更改占位符图标的颜色时，我发现它采用了占位符文本颜色或文本框填充颜色，这使我认为它实际上是使用字体定义而不是图标定义。

如何自定义离子占位符图标

0 个答案: