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

Question

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

码：

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

但是我的css代码不能优先于离子（内置）。

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

Answer 1

我不知道如何解决，遇到同样的问题，但它似乎与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 2

要修改图标，您可以尝试以下方法：

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

Answer 3

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

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);
      }
    });
}