CODEWITHSUNDEEP
angularionic-frameworkionic2ionic3ionic4
Kunal Ranjan
Kunal Ranjan

Reputation: 195

How to remove small caret from ion-select in ionic4

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.

enter image description here

Upvotes: 16

Views: 14614

Answers (12)

kefu
kefu

Reputation: 1

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

Upvotes: 0

Ngọc Lương
Ngọc Lương

Reputation: 89

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

Upvotes: 0

Melisa Luciano
Melisa Luciano

Reputation: 1

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

Upvotes: 0

nelson6e65
nelson6e65

Reputation: 1101

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>

Upvotes: 11

Rohinibabu
Rohinibabu

Reputation: 678

To remove the icon,

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

To modify the icon,

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

Upvotes: 18

phosph
phosph

Reputation: 21

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

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

and the arrow disappear.

Upvotes: 1

osama sonija
osama sonija

Reputation: 1

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

Upvotes: 0

S. Roose
S. Roose

Reputation: 1647

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

Upvotes: 8

JIN
JIN

Reputation: 1

.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

Upvotes: 0

Sangminem
Sangminem

Reputation: 11

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

Upvotes: 1

Fikret
Fikret

Reputation: 263

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

Upvotes: 2

Sam
Sam

Reputation: 1139

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

Upvotes: -1

Related Questions