angularionic-frameworkionic2ionic3ionic4

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

Solution

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