How to remove small caret from ion-select in ionic

问题:

I want to remove the inbuilt grey small caret from ion-select, and use my custom caret(arrow) instead.

Code:

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

But my css code is unable to precedence over the ionic(inbuilt).

You can see there are two arrows in the image, one is inbuilt and another is custom. I want to remove inbuilt(ionic) one.

回答1:

I don't know how to fix, faced same problem, but it seems to be issue with DOM Shadow

If you will find anything, let to know as well please, thanks.

Update: Found some answer

UPDATE #2

I created directive in order to have access to Shadow DOM and it's able to add styles into isolated DOM.

HTML:

 <ion-select appStyle>

Directive(need to find better implementation):

    constructor(private el: ElementRef) {

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

回答2:

To modify the icon , you can try something like this :
.select-icon-inner { border-top: transparent!important; }

回答3:

If there are several ion-select items, here is a sample.

TS Code :

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