如何从ionic4中的离子选择中删除小插入符号

Question

我想从中删除内置的灰色小插入符号ion-select，并改用我的自定义插入符号（箭头）。

码：

ion-select {
  color: grey;
  background:url("/assets/resources/img/ArrowDownConfig.svg") no-repeat 92% center !important;
}

但是我的css代码无法优先于ionic（内置）。

您可以看到图像中有两个箭头，一个是内置的，另一个是自定义的。我要删除内置的（离子的）一个。

Answer 1

要删除图标，

 ion-select::part(icon) {
    display: none !important;
   }

要修改图标，

  ion-select::part(icon) {
    color: #ffa612 !important;
   }

Answer 2

如果你只想删除插入符号，你可以这样做：

// ...other page methods

  ionViewDidEnter() {
    const ionSelects = document.querySelectorAll('ion-select');
    ionSelects.forEach((sel) => {
      sel.shadowRoot.querySelectorAll('.select-icon-inner')
        .forEach((elem) => {
          elem.setAttribute('style', 'display: none;');
        });
    });
  }

基于@Sangminem 响应

此外，就我而言，我正在使用slot="end"anion-icon来放置替换图标：

<ion-item lines="inset">
  <ion-label position="floating">Label</ion-label>

  <ion-select>
    <ion-select-option value="1">Option 1</ion-select-option>
    <ion-select-option value="2">Option 2</ion-select-option>
    <ion-select-option value="2">Option 3</ion-select-option>
  </ion-select>

  <ion-icon color="danger" slot="end" name="arrow-dropdown-circle" class="ion-align-self-center"></ion-icon>
</ion-item>

Answer 3

我已经创建了这个指令，您可以将其添加到您的 ion-select 中，使其看起来就像其他带有占位符（没有箭头）的离子元素。

用法：

<ion-select placeholder="Choose" appNoArrow>...