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

To remove the icon,

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

To modify the icon,

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

Answer 2

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:

<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

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

I think this is only possible with ioni3. If you want to solve only css in ionic4, you need to know the exact class name of select-icon in ionic4

Answer 4

I found a way to remove default icon with css, using ::part directive:

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

and the arrow disappear.

Answer 5

To modify the icon, call this function

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

Answer 6

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