How to remove small caret from ion-select in ionic4

To remove the icon,

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

To modify the icon,

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

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).


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

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

// ...other page methods

  ionViewDidEnter() {
    const ionSelects = document.querySelectorAll('ion-select');
    ionSelects.forEach((sel) => {
        .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-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-icon color="danger" slot="end" name="arrow-dropdown-circle" class="ion-align-self-center"></ion-icon>

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


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


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