如何移动离子4中搜索栏右侧的搜索栏搜索图标

Question

我正在使用ionic-4开发混合应用程序。我有一个简单的搜索页面，我想在其右侧移动search-bar的搜索图标。我尝试使用不同的CSS，但没有找到任何解决方案。如果您知道的话，请提出建议。

我的离子搜索条码如下

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-searchbar showCancelButton="never"></ion-searchbar>
  </ion-toolbar>
</ion-header>

谢谢。

Answer 1

由于搜索栏组件does not have shadow dom enabled，您可以很好地操纵内部组件的CSS。您只需要重置ion-iconleftCSS属性：

ion-searchbar ion-icon {
  right: 16px !important;
  left: auto !important;
}

如果在dir="rtl"内的html标签上设置index.html，则可以看到离子在需要翻转图标时也是如此：

[dir=rtl].sc-ion-searchbar-md .searchbar-search-icon.sc-ion-searchbar-md {
  left: unset;
  right: unset;
  right: 16px;
}