How to remove small caret from ion-select in ionic4

Question

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

Code:

ion-select {
  color: grey         


        

Answer 1

If you want just remove the carets, you can do this:

// ...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;');
        });
    });
  }

Based on @Sangminem response

In addition, in my case, I'm using slot="end" with an ion-icon to place a replacement icon:

  Label

  
    Option 1
    Option 2
    Option 3