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

我不知道如何解决，遇到了同样的问题，但是DOM Shadow似乎有问题

如果您能找到任何东西，请也告诉我们，谢谢。

更新：找到了一些answer

更新＃2

我创建了指令以访问Shadow DOM，并且能够将样式添加到隔离的DOM中。

HTML：

 <ion-select appStyle>

指令（需要找到更好的实现方式）：

    constructor(private el: ElementRef) {

    setTimeout(() => {
        this.el.nativeElement.shadowRoot.querySelector('.select-icon-inner').setAttribute('style', 'display: none !important');
    }, 3000);
}

Answer 3

如果只想删除插入符号，可以执行以下操作：

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

在我的情况下，我使用slot="end"和ion-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" align-self-center></ion-icon>
</ion-item>

Answer 4

我创建了this伪指令，您可以将其添加到离子选择中，使其看起来与具有占位符的其他离子元素（无箭头）一样。

用法：

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

Answer 5

我找到了一种使用::part指令使用CSS删除默认 icon 的方法：

&::part(icon) {
    display: none;
}

并且箭头消失。

Answer 6

要修改图标，您可以尝试执行以下操作：
.select-icon-inner { border-top: transparent!important; }

Answer 7

如果有几个离子选择项，这是一个样本。

TS代码：

ionViewDidEnter() {
    // ion-select customizing
    const ionSelects = document.querySelectorAll('ion-select');
    let img = null;
    ionSelects.forEach((ionSelect) => {
      const selectIconInner = ionSelect.shadowRoot.querySelector('.select-icon').querySelector('.select-icon-inner');
      if(selectIconInner){
        selectIconInner.attributes.removeNamedItem("class");
        img = document.createElement("img");
        img.src = "./new-arrow-down-image.svg";
        img.style.width = "12px";
        img.style.paddingTop = "3px";
        img.style.paddingLeft = "4px";
        img.style.color = "black";
        img.style.opacity = "0.5";
        selectIconInner.appendChild(img);
      }
    });
}

Answer 8

.select-icon-inner { border-top: transparent!important;}

我认为只有ioni3才有可能。如果只想解决ionic4中的css，则需要知道ionic4中select-icon的确切类名

Answer 9

要修改图标，请调用此功能

async removeSelectCaret(id){
    const select = await (window.document.querySelector(`#${id}`) as HTMLIonSelectElement).componentOnReady();
    select.shadowRoot.childNodes[1]['style'].display="none";
  }

Answer 10

如果您想添加离子选择选项的图标，只需在

上添加mode =“ ios”

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

10 个答案: