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;
  background:url("/assets/resources/img/ArrowDownConfig.svg");
}

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.

Bridgeport

Answer 1

I've created this directive which you can add to your ion-select to make it look just like other ion elements with placeholder (without arrow).

Usage:

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

Suspense

Answer 2

To remove the icon,

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

To modify the icon,

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

Ichang

Yeah, this is working for Ionic 5. Actually I am using "@ionic/angular": "^5.0.4" and it's working fine. – Ichang

I meant... That this doesn’t work for Ionic 4 or less. Only does for Ionic 5 or more. – Chrisom

BTW, if you use a floating label, you should use width: 0 instead of display:none – Chrisom

Answer 3

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>

Chrisom

BTW, if you use a floating label, you should set width: 0 style instead of display:none – Chrisom

For Ionic 5, you should use this answer instead: https://mcmap.net/q/717065/-how-to-remove-small-caret-from-ion-select-in-ionic4 – Chrisom

Answer 4

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

Breaker

Answer 5

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

Aforesaid

Answer 6

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

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

and the arrow disappear.

Prolonge

BTW, if you use a floating label, you should use width: 0 instead of display:none – Chrisom

Answer 7

.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

Caravan

Answer 8

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

Dominion

Answer 9

If you want to quite the icon of ion-select-option only add mode="ios" on

Kamakura

Note: answers that are very brief and/or are questions back to the poster should probably be comments. You only need 50 rep points to comment under a question - could you move this there? – Grilse

Answer 10

For Ionic 4, does not support ::part selector, so we could not hide the caret by CSS. I have a idea to hide the icon that adding a layer on-top and overlap the caret icon, use same background color with ion-select

ion-select {
  &.hide-caret {
    opacity: 1;
    &::after {
      content: ' ';
      width: 40px;
      height: 100%;
      right: 0;
      top: 0;
      position: absolute;
      background-color: white;
    }
  }
}

Usage:

<ion-select class="hide-caret" ...>

Book

Answer 11

 ngAfterViewInit(){
setTimeout(() => {
    const ionSelects = document.querySelectorAll('ion-select');
    // const ionSelects:any =  document.getElementsByClassName('phoselect');
    let img = null;
    ionSelects.forEach((ionSelect) => {
      const selectIconInner = ionSelect.shadowRoot.querySelector('.select-icon').querySelector('.select-icon-inner');
      if(selectIconInner){
        let _cs=`right: 5px;left:0px; top: 100%;margin-top: -3px;`
        selectIconInner.setAttribute("style",_cs)
         
      }
    });
  }, 1000);
} 

Disconformity

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Castled

Answer 12

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

Romanaromanas