How to remove small caret from ion-select in ionic4

angular ionic-framework ionic2 ionic3 ionic4

Kunal Ranjan · Mar 22, 2019 · Viewed 7.8k times · Source

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.

Answer

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